How do i show loading screen while server component is fetching data? | Next.js | Page 1

solar canyon May 19, 2024, 5:57 AM

#

I would like to show loading screen, or some sort of loading for each item when the server component is fetching data.

timber pythonBOT May 19, 2024, 5:57 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

solar canyon May 19, 2024, 5:58 AM

#

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

barren umbra May 19, 2024, 6:26 AM

#

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.

solar canyon May 19, 2024, 6:28 AM

#

barren umbra Create a file with the name loading.js or loading.tsx and place your loader ther...

is there a way to make those loading components

#

like these

barren umbra May 19, 2024, 6:29 AM

#

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>

solar canyon May 19, 2024, 6:30 AM

#

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

barren umbra May 19, 2024, 6:32 AM

#

just a sibling of server component would do

#

Can you share your folder structure?

solar canyon May 19, 2024, 6:33 AM

#

#

this is the entire src folder structure

#

layout.js is the parent server component

#

which loads data on each load

#

also its not cached

barren umbra May 19, 2024, 6:36 AM

#

Where is your server component which is fetching data?

solar canyon May 19, 2024, 6:37 AM

#

barren umbra Where is your server component which is fetching data?

layout.js

#

is the server component

#

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

barren umbra May 19, 2024, 6:38 AM

#

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

solar canyon May 19, 2024, 6:38 AM

#

but then how would i make loading components

barren umbra May 19, 2024, 6:41 AM

#

Sorry, didn't get you

solar canyon May 19, 2024, 6:41 AM

#

solar canyon like these

i want to make the component load like this

#

while fetching data

barren umbra May 19, 2024, 6:42 AM

#

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

solar canyon May 19, 2024, 6:43 AM

#

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

barren umbra May 19, 2024, 6:44 AM

#

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.

solar canyon May 19, 2024, 6:45 AM

#

barren umbra Why would it change? Loading.tsx will display until your data fetches, once it f...

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

#

i want loading to have same layout

#

just the component loads

barren umbra May 19, 2024, 6:47 AM

#

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

solar canyon May 19, 2024, 6:47 AM

#

whats a suspense

barren umbra May 19, 2024, 6:48 AM

#

solar canyon whats a suspense

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming

Routing: Loading UI and Streaming | Next.js

Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.

solar canyon May 19, 2024, 6:49 AM

#

ok

#

how do i wrap my layout inside suspense

#

cause layout.js is fetching data

#

@barren umbra where do you fetch data

#

inside layout.js or another server component

terse dove May 19, 2024, 7:20 AM

#

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

barren umbra May 19, 2024, 7:49 AM

#

solar canyon how do i wrap my layout inside suspense

Wrap your data fetching components with suspense boundary

uneven totem May 19, 2024, 7:52 AM

#

thumbs_Up

#

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

Tiger's Place

Suspense and suspended components in React

What does it mean when a component "suspends"?

solar canyon May 19, 2024, 8:02 AM

#

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

barren umbra May 19, 2024, 8:18 AM

#

pass a fallback to suspense to show while loading

uneven totem May 19, 2024, 9:03 AM

#

not to be that guy

#

but its also in the docs

#

😅

#

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

#How do i show loading screen while server component is fetching data?