Rendering a loading state in a NextJS app

Question

I am trying to render some stats on the landing page of the app I am working on and I want to use a skeleton as a placeholder for the numbers whilst they are fetched from the database. This is the hierarchy:

<div>
{...}
    <Suspense fallback={<LoadComp/>}>
        {/*@ts-ignore*/}
        <SomeData/>
     </Suspense>
{...}
</div>

This is the SomeData component:

async function SomeData() {
    const data = await fetch("http://localhost:3000/api/test", {cache: "no-cache"}).then(res => res.json());
    return (
        <div>{data.message}</div>
    );
}

This is the LoadComp component:

function LoadComp() {
    console.log("loaded");
    return <div>Loading</div>
}

All of them are server components The API endpoint is as follows:

export async function GET() {
    sleep(2); //sleeps for 2 seconds to create a delay.
    return NextResponse.json({message: "Hi"});
}

Now what is happening is that whilst loaded is printed in the console, the JSX of LoadComp is never actually rendered and the page will not be rendered until the request is completed. Another behavior I have noticed is that the fallback is only triggered on error. Say for example I cast the returning fetched data to some object, an error would be thrown but the Loading div would appear for a brief moment. Ignoring the fact that the fetch request is not cached, I would expect to see the Loading div but I'm not sure what I am doing wrong. Any help?

Rendering a loading state in a NextJS app

0 Answers0