Use an intentional loading sequence

[gaearon]

This makes the demo feel more aligned with the UX expected from HN:

• I removed the loading "shell" for the front page and for the story page. It looked okay on the front page, but only for the first load. For switching pages, it didn't feel good. For the story page, the shell was entirely wrong because the glimmer does not remotely match the content.
• I kept the Suspense boundary around comments. I've adjusted it to not show "Loading comments" (that much is obvious) and to match the margins (so that it doesn't show up in the wrong place).
• I moved Footer into the main layout to match the HN design.

With these changes combined, I believe it works much closer to what people expect an HN demo to behave.

Before:

before.mov

After:

after2.mov

If we want to introduce the shell for the front page I think we can do that, but we need to be a lot more careful about how it behaves. I suggest that it shouldn't show up on pagination (that feels disruptive), and it should definitely not show up for the story page.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-rsc-news	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2023 6:24pm

[gaearon]

Issues I'm seeing in production:

• Despite the "rewrite", there's 404 for initial load.
• There's still a second request at the end, I don't know why.
• Clicking "comments" link can stall for seconds. What's up? I guess this already happens on the deployed site (me removing the loading state made it more obvious), but I don't see a stall like this happening locally. Is it just that slow to call to HN from wherever this is being deployed?

[gaearon]

I tried to make comments a route group, hoping that this would make the "instant loading UI" prefetch the story above the fold. But prefetching doesn't seem to do what I want. Also, there's a build failure but I don't know what it is because it seems like CI is private.