Chapter 9 loading.tsx and <Suspense /> not working

[maxmax1992]

After carefully following the steps of the tutorial I'm facing 2 issues regarding the "Loading" states: (only thing I'm doing different in this course is using bun instead of npx) The code files at this exact failure incase you want to see the code: https://github.com/maxmax1992/dashboard_nextjs_demo/tree/8462322da99822e3e458480c6c95a3a5f4123070

1. Initial load loads the page only after 3 second delay, without giving me the placeholder loading state (image below). So when I refresh the page I'm not getting the skeleton/loading screen. it just lags until the whole page loads.

2. After adding <Suspense/> objects it's not render them separately instead all components wait RevenueChart to render and then they're displayed.

How to reproduce: See the video for comprehensive overview of my code and the unexpected behavior:

https://github.com/user-attachments/assets/7d791ceb-9711-42c3-b70f-4f5b1d4c604f

This reddit post might be related: https://www.reddit.com/r/nextjs/comments/1cq97wn/just_start_learning_nextjs_but_suspense_does_not/

[maxmax1992]

Issue seems to be in the Firefox Developer Edition, after testing with Arc it works as expected. 🤔 Seems like a compatibility issue?

[ChickenOnBoard]

I have same issues, but in chrome and edge. Did you find out something more?

[leerob]

I am not able to reproduce unfortunately – let me know if still seeing it on latest version and using Chrome. Could be firefox specific as mentioned.

[maxmax1992]

Didn't try chrome but it worked on Arc since it's chromium based I assume it works on chrome as well, this seems a firefox specific issue indeed.