Pull requests inbox: custom section order breaks hydration (duplicated page) and leaves a section loading forever

[choyongjoon]

🏷️ Discussion Type

Bug

Body

Summary

On https://github.com/pulls/inbox, if a user has customized the section order (⚙️ → Customize sections) and the browser has no section-order cookie, the page renders twice. The top copy is the server HTML and does not respond. One section also shows a loading skeleton forever. Reset to default fixes it. Saving a custom order again in the same browser also fixes it, because that sets the cookie.

Steps to reproduce

1. In Customize sections, move "Ready to merge" to the top and hide "Needs your teams' review". Save.
2. Open /pulls/inbox in a different browser or profile, where the order cookie is not set.
3. Hard-reload the page.

Actual

• react-app[app-name="dashboard-surface"] > [data-target="react-app.reactRoot"] has two layout divs. The first is the SSR markup, with no React fiber and _R_… ids. The second is a client render with _r_… ids. The page layout shows twice.
• After soft navigation (for example, Authored by me → Inbox), "Needs your review" stays as a skeleton forever. Clearing its query results does not change this.
• Same result in Chrome, Zen, and a clean Chromium with no extensions.

Analysis (from the shipped dashboard-surface bundle)

• The section that is first visible uses the …Blocking route query. The other sections use …Deferred.
• The server takes the section order from the saved user setting. It treats "Ready to merge" as first and embeds sectionReadyToMergeBlocking.
• The client calculates firstVisibleSectionId from cookies. When the order cookies are not there, it uses the default order, so it treats "Needs your review" as first. It waits for sectionReviewRequestedBlocking, but that query is not in the embedded data, so it is never enabled. Its isPending stays true forever.
• This makes the server and client render different output. Hydration fails, and the SSR DOM is not removed. The SSR HTML has no Suspense markers.
• The console shows No HydrateFallback element provided to render during initial hydration many times.

Expected

The client should get its section order from the same source as the server, or it should not use cookies only. Also, when hydration fails, the page should recover to one working tree.

Workaround

Customize sections → Reset to default → Save. Or save the custom order again in each browser.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐