Skip to content

Fix blank page when switching year group - #25

Open
ravisharma-09 wants to merge 1 commit into
NST-DEVFORGE:mainfrom
ravisharma-09:fix/cohort-switch-blank
Open

ravisharma-09 wants to merge 1 commit into
NST-DEVFORGE:mainfrom
ravisharma-09:fix/cohort-switch-blank

Conversation

@ravisharma-09

Copy link
Copy Markdown
Contributor

Follow-up to #24, which is already merged. Switching between 1st Year and 2nd Year left the page rendering nothing until the next fetch landed. On the live second-year roster that is a blank screen for as long as GitHub takes, so it looked like the page had broken.

Reproduced in development in both directions, on PR Statistics, Quality PRs and GSoC Ready.

Cause

A half-reset. Changing year cleared the fetched data but not the loading flag, so the render fell into the loading branch while loading was still false and no error was set — and the state component draws nothing in that combination.

The data was being cleared inside an effect, which React warns against for exactly this reason: every piece of state has to be remembered and reset separately, and the one that gets missed is invisible until somebody hits the gap. I introduced this in #24 while satisfying that same lint rule, which is a fair sign the pattern was the wrong one.

Fix

The subtree is now keyed on the cohort, so switching year remounts it and every value starts fresh: the numbers, the loading flag, the last error, and the author and member filters, which otherwise list people who are not in the other year group.

This is React's own answer to "reset all state when an input changes", and unlike a manual reset it cannot drift — state added later is covered without anybody remembering to reset it here.

The key is applied by a small client component inside the Suspense boundary that already existed, so the pages above it still prerender rather than the whole route turning dynamic.

Result

Switching now shows a spinner immediately and never goes blank. Sampling the DOM every 150ms across a switch, the page goes straight from one cohort's content to a spinner to the other's.

Also removes the derived-staleness workarounds the remount makes redundant, which is why three components get smaller.

Checks

  • npm run build passes; all six pages still prerender statically ().
  • npx tsc --noEmit clean.
  • Zero lint errors in the touched files; the 6 remaining warnings are the pre-existing <img> ones.

🤖 Generated with Claude Code

Switching cohort left the page rendering nothing until the next fetch
landed — on the live second-year roster that is a blank screen for as long
as GitHub takes.

The cause was a half-reset. Changing year cleared the fetched data but not
the loading flag, so the render fell into the loading branch while
`loading` was still false and no error was set, and the state component
drew nothing at all. The data was cleared inside an effect, which React
warns against for exactly this reason: each piece of state has to be
remembered separately, and the one that was missed is invisible until
somebody hits the gap.

Rather than reset the pieces individually, the subtree is now keyed on the
cohort, so switching year remounts it and every value starts fresh — the
numbers, the loading flag, the last error, and the author and member
filters, which list people who are not in the other year group. This is
React's own answer to "reset all state when an input changes" and it
cannot drift: state added later is covered without anybody remembering to
reset it.

The key is applied by a client component inside the existing Suspense
boundary, so the pages above it still prerender rather than the whole
route turning dynamic.

Verified in both directions on PR Statistics, Quality PRs and GSoC Ready:
a spinner appears immediately on switch and the page never goes blank.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

@ravisharma-09 is attempting to deploy a commit to the Geetansh Goyal's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant