Its because when i redirect to another link/route, the layout refetches the data and the redirecting takes a while

i would like to redirect instantly, but load after redirecting

Create a file with the name loading.js or loading.tsx and place your loader there. It will display until your server component fetches data.

is there a way to make those loading components

like these

yeah its skeleton, there are many libraries out there to make such ui, plus you could create the same using css too.

Tailwind code

<div role="status" class="max-w-sm animate-pulse">
<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
<span class="sr-only">Loading...</span>
</div>

i want to know where to use them

so that the server component shows it

even while its fetching

because making a loading.js would require me to make the entire layout again

and then add those loading components

just a sibling of server component would do

Can you share your folder structure?

this is the entire src folder structure

layout.js is the parent server component

which loads data on each load

also its not cached

Where is your server component which is fetching data?

is the server component

and it fetches data and passes the data to the client components

place the loading.jsx/loading.tsx at the same level.

but then how would i make loading components

Sorry, didn't get you

i want to make the component load like this

while fetching data

place this code in the loading.tsx file, it'll show untill the fetching ends

but that would make the layout of the website change no?

Why would it change? Loading.tsx will display until your data fetches, once it fetches the data your actual content with show not the loading.

no but i want the layout to not change even when its loading

i want loading to have same layout

just the component loads

ok then wrap your loading components inside suspense and you can show a placeholder

whats a suspense

ok

how do i wrap my layout inside suspense

cause layout.js is fetching data

@Spectacled bear where do you fetch data

inside layout.js or another server component

you can wrap your component with its data in a suspense boundary

Wrap your data fetching components with suspense boundary

precisely, that should be enough

if youre interested in how Suspense itself works, you can read this: https://tigerabrodi.blog/suspense-and-suspended-components-in-react

altho might be confusing if u dont know RSCs thoroughly yet

i wrapped client component that uses data passed from server component in suspense

but it doesnt load

that seperately

but for now i just wrapped whole layout children in suspense

and its fine ig

pass a fallback to suspense to show while loading

not to be that guy

but its also in the docs

😅

like fallback is super standard, unless sinista referred to someth else

i did actually