Fix blank page when switching year group - #25
Open
ravisharma-09 wants to merge 1 commit into
Open
ravisharma-09 wants to merge 1 commit into
ravisharma-09 wants to merge 1 commit into
Conversation
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>
|
@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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
loadingwas stillfalseand 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 buildpasses; all six pages still prerender statically (○).npx tsc --noEmitclean.<img>ones.🤖 Generated with Claude Code