Prefetch loading and intercepting route POC
The purpose of this repo is POC why the loading.tsx not prefetched and instant show loading state when navigating to another page
All pages except the homepage share two common features:
- An async sleep function to delay the initial rendering by 5 seconds.
- A static loading state component called "loading.tsx".
- loading.js of shop should fetched when the link display in viewport
- the loading state should be displayed when navigating instantly
NOTE: open Network panel in inspect and select Slow 3G
NOTE 2: command + Shift + R to hard refresh (ignore cache)
Dynamic route
Shop pageResult:
- ✅ loading.js is fetched
- ✅ instantly display loading state
FAQ How to check loading state is fetched : search 'Loading Shop page'
Dynamic route - some client component in loading.tsx
Quest pageResult:
- ✅ loading.js is fetched
- ❌ instantly display loading state
FAQ How to check loading state is fetched : search 'Loading Quest page'
Intercepting route - Static page
Static pageResult:
- ✅ loading.js is fetched
- ✅ instantly display loading state
FAQ How to check loading state is fetched : search 'Loading intercepting - Static'
Intercepting route - dynamic params page
dynamic params page - id = 123Result:
- ❌ loading.js is fetched
- ❌ instantly display loading state
FAQ How to check loading state is fetched : search 'Loading intercepting - Dynamic params'