How to Show loading ui in a page
Answered
Arinji posted this in #help-forum
ArinjiOP
Heya so i am making a site which takes a spotify playlist and organizes 10 songs at a time to diff playlists. So i wanted the ui to look like this where there is a server component, inside it each song is its own client component which calls an api and shows a loading state while in progress and a success ui once done. So how do i go about this?
48 Replies
ArinjiOP
Using the app router btw
the issue i come with loading page is that a server component first fetches all the data and hence the loading.tsx file has no use in a server page itself
so i dont know how to go about this
ArinjiOP
also i dont need the code, just a overview
Polar bear
Use suspense with a loading component as the fallback
@Polar bear Use suspense with a loading component as the fallback
ArinjiOP
but wont the loading.tsx file do that?
Polar bear
I mean if it loads fast then there’s no issue, loading screens are for large datasets or/long queries, or slow connections mostly. You could fake some timeout to show it if you really wanted.
@Polar bear I mean if it loads fast then there’s no issue, loading screens are for large datasets or/long queries, or slow connections mostly. You could fake some timeout to show it if you really wanted.
ArinjiOP
hmm but if i did have a loading.tsx file, and each client component called an api with a useEffect hook on client mounting, and the api took time.. the loading.tsx file will be shown for each of the client components right?
@Arinji hmm but if i did have a loading.tsx file, and each client component called an api with a useEffect hook on client mounting, and the api took time.. the loading.tsx file will be shown for each of the client components right?
loading.tsx is only for
Suspense-compatible stuff, which includes server components but not a manual client-side data fetching like you describedif you use useEffect you need to make a
isLoading state and manually update iti have small server components inside a big server page
where each small server component does a certain task async
then that is suspense-compatible yes
ArinjiOP
ok and when i load the page
how will it work?
like i want to add pagination where as u scroll down more of the server components are rendered and each starts calling the api one at a time
because i cant just do all the songs at once since its gonna take too long
but i cant add server components in a client component
so
@Arinji like i want to add pagination where as u scroll down more of the server components are rendered and each starts calling the api one at a time
how do you do this? "as you scroll down" so it means you have to access the window object, which disqualifies you from using server component
ArinjiOP
basically i am making a song organizer so its gonna go thru your spotify playlist and organize songs
@Arinji but i cant add server components in a client component
yes, so in this use case you must use client components
ArinjiOP
but its gonna take a while to do each song
so instead of doing all of them at once
i want to make it so each song is its own component
and only at a time 10 songs are organized
and u can see the progress for each song
as u scroll down more components are showed and they start organizing themself
made sense?
so infinite scrolling in a sense?
since rendering is based on scroll postiion, this is impossible to do in server components
you have to use client components
and make your own
isLoadingif you use react-query or swr you have
isLoading built inArinjiOP
aight so i can just make my own flags and run the loading.tsx ui?
like import it
and display it
yeah
if (isLoading) return <Loading />
return <Render song={song} />Answer
ArinjiOP
aight aight, also afetr hearing my plan.. do you see any things u are sceptical abt
im still thinking my process
so anything you think which sounds unrealistic tell me
Asiatic Lion
is this client or server component?
not really, infinite scrolling is not bad, other than that i have no comments
@Asiatic Lion is this client or server component?
ArinjiOP
server page with client components in it
@joulev not really, infinite scrolling is not bad, other than that i have no comments
ArinjiOP
aight thanks for your help