Suspense infinite fallback loading state with javascript turned off
vladshcherbin opened this issue · 0 comments
vladshcherbin commented
Link to the code that reproduces this issue
https://github.com/vladshcherbin/suspense-infinite-loading
To Reproduce
- Start the app
- From home page go to /recipes and see loading state and recipes list
- Turn off javascript and do same thing (or reload the page)
- See infinite loading state
- Check server logs to confirm data was fetched (logs output recipes number)
- Check page source to see data actually exists, hidden at the end
Current vs. Expected behavior
Current
When javascript is turned off, suspense fallback state is infinite and never shows actual data. For the end user or search engine bot it results in an infinite loading state. Data is actually fetched on the server (can be seen in server logs) and exists hidden at the end of the page.
Screenshots:
If Suspense
is removed, data is shown to the end user but loading state is gone 🥲
Expected
Since data is actually fetched and exists on the page, it should be shown to the end user even with javascript turned off
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:02:45 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T8112
Available memory (MB): 8192
Available CPU cores: 8
Binaries:
Node: 22.10.0
npm: 10.9.0
Yarn: 1.22.22
pnpm: 9.14.2
Relevant Packages:
next: 15.1.0 // Latest available version is detected (15.1.0).
eslint-config-next: N/A
react: 19.0.0
react-dom: 19.0.0
typescript: 5.7.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Lazy Loading, Runtime
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
No response