Next.js Discord

Discord Forum

What is the best way to add loading before being able to see the page

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Hey,
I wanted to ask you guys how can I make a loading system like most of the modern and heavy websites that show you a loading screen or an skeleton (https://ui.shadcn.com/docs/components/skeleton) until the content is fully loaded? I tried it with suspense or loading.tsx and they are not that effecting or I don't know how to use them properly
Answered by B33fb0n3
no, like making your app functional. Somewhen the client need to download the assets to use and display them correctly. There is no thing, that you can use to determine how long it takes until everything is downloaded. If you want to have some kind of loading animation, you must load it serverside (so it's instantly visible) and hide it after X milliseconds. You can use a suspense boundary for data fetching stuff, like I shared
View full answer

36 Replies

@Australian Freshwater Crocodile Hey, I wanted to ask you guys how can I make a loading system like most of the modern and heavy websites that show you a loading screen or an skeleton (https://ui.shadcn.com/docs/components/skeleton) until the content is fully loaded? I tried it with suspense or loading.tsx and they are not that effecting or I don't know how to use them properly
B33fb0n3
normally you do it via a suspense boundary like you did now. Can you share an example for a page, that have the suspense boundary, but doesnt show it like expected? Keep in mind, that the hydration process can't be visible with a loading screen
@B33fb0n3 normally you do it via a suspense boundary like you did now. Can you share an example for a page, that have the suspense boundary, but doesnt show it like expected? Keep in mind, that the hydration process can't be visible with a loading screen
Australian Freshwater CrocodileOP
"use client";

import { SiSpinrilla } from "react-icons/si";

export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-black">
      <SiSpinrilla className="text-white text-6xl animate-spin" />
    </div>
  );
};
loading.tsx
I've never seen this page myself lol
B33fb0n3
is there any reason, why it's 'use client'?
@B33fb0n3 is there any reason, why it's `'use client'`?
Australian Freshwater CrocodileOP
idk but does it have to do anything with the functionality?
I mean why does it even load when the assets are gonna load after this load is done?
I just checked, it happens to me too
Assets come after this loading
Like I see the page but the assets take some time to load after the loading is done
@Australian Freshwater Crocodile Whats the point of this?
B33fb0n3
you can see, that there is a loading page while the page is loading
@B33fb0n3 you can see, that there is a loading page while the page is loading
Australian Freshwater CrocodileOP
Ik I meant the assets still not loaded even tho the loading is done
@Australian Freshwater Crocodile Ik I meant the assets still not loaded even tho the loading is done
B33fb0n3
it looks like all the assets are aleardy loaded, before the page is loaded (see attached)
Can you check this?
I don't see any loading anywhere in this
and assets loading after I see the page
@Australian Freshwater Crocodile https://bardiamardan.vercel.app/
B33fb0n3
you are right. Here is the document loaded first and then the assets (see attached)
so what should i do
@Australian Freshwater Crocodile so what should i do
B33fb0n3
add a loading.js, that is not a client component. Keep in mind, that the hydration process can't be visible with a loading screen
@B33fb0n3 add a loading.js, that is not a client component. Keep in mind, that the hydration process can't be visible with a loading screen
Australian Freshwater CrocodileOP
wdym by hydration process? like switching between pages in the website?
@Australian Freshwater Crocodile wdym by hydration process? like switching between pages in the website?
B33fb0n3
no, like making your app functional. Somewhen the client need to download the assets to use and display them correctly. There is no thing, that you can use to determine how long it takes until everything is downloaded. If you want to have some kind of loading animation, you must load it serverside (so it's instantly visible) and hide it after X milliseconds. You can use a suspense boundary for data fetching stuff, like I shared
Answer
@Australian Freshwater Crocodile Oh How should I do that then? for my loading.tsx?
B33fb0n3
you can archive that like:
you must load it serverside (so it's instantly visible) and hide it after X milliseconds. You can use a suspense boundary for data fetching stuff, like I shared
with suspense boundary I mean your loading.tsx, as it's just a suspense boundary
B33fb0n3
@Australian Freshwater Crocodile solved?
@B33fb0n3 <@442728361970892801> solved?
Australian Freshwater CrocodileOP
Yea thanks🙏🏻🙏🏻
Just what about 3d websites?
Or other really heavy websites?
They load exactly after the assets are loaded
How do they know? cuz its not possible to be this accurate using a fixed delay
@Australian Freshwater Crocodile Just what about 3d websites?
B33fb0n3
when loading 3d assests, you can import specific components with skipping SSR and that can contain a "loading" key. However, that does not archive the effect, that you want. When using this loading key, you would show a loading part on your website for a specific part of your website. But you want to have a big loading screen over the whole page.
happy to help