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

Result:

• ✅ 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

Result:

• ✅ loading.js is fetched
• ❌ instantly display loading state

FAQ How to check loading state is fetched : search 'Loading Quest page'

Intercepting route - Static page

Result:

• ✅ 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

Result:

• ❌ loading.js is fetched
• ❌ instantly display loading state

FAQ How to check loading state is fetched : search 'Loading intercepting - Dynamic params'