Next.js Discord

Discord Forum

loading screen for client-side JavaScript?

Unanswered
buby | Next.js Color Planet posted this in #help-forum
Open in Discord
Avatar
buby | Next.js Color PlanetOP
how should I actually show a loading screen when all of the client-side JavaScript needed for the page is being loaded in Next.js' app router?

19 Replies

Avatar
B33fb0n3
you can use the loading.tsx to show a loading screen. Do I miss something in your question? 🤔
Avatar
buby | Next.js Color PlanetOP
I mean, when the client-side JavaScript is being loaded
Avatar
B33fb0n3
yea, the suspense boundary from it should cover the loading part
Avatar
buby | Next.js Color PlanetOP
somehow it doesn't show up, even though the client side javascript is obviously being loaded to the browser
wait
excluding the loads, this is what the layout.tsx looks like:
export const metadata: Metadata = {
  title: "almahbuby",
  description: "why are you reading this lol",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${inter.variable} ${geist.variable} ${geistMono.variable}`}>
        <body>
            <Navbar />
                <Suspense fallback={<Loading />}>
                    <div className="mt-24">
                        {children}
                    </div>
                </Suspense>
            <Footer />
        </body>
    </html>
  );
}
(in this case, i tried to manually use the suspense in the layout cus loading.tsx also doesnt work)
and the loading.tsx is just this for testing purposes
export default function Loading() {
    return (
        <div className="h-screen w-screen bg-background px-8 fixed top-0 z-[60] flex flex-col justify-center">
            <h1>Loading lmao</h1>
        </div>
    )
}
even though the log gets rendered when i put a console.log() here
Image
Avatar
Black-throated Blue Warbler
you're trying to view the loader on a request that only takes 129ms to complete? dont blink
    await new Promise((resolve) => setTimeout(resolve, 5000));

slap this in your api function before you return your data to simulate a 5s load
Avatar
buby | Next.js Color PlanetOP
tbf it isn't exactly the full context and i was trying to simulate loading my site on a slower connection
Image
Avatar
Black-throated Blue Warbler
gotcha, looks like initial load took a while but those subsequent fetches still very fast, tried clearing your cache?
Avatar
buby | Next.js Color PlanetOP
wait, browser cache or the one on the project directory?
i tested this while in incognito though
Avatar
Black-throated Blue Warbler
the next.js cache that is automatically applied to fetches
Avatar
buby | Next.js Color PlanetOP
setting artificial loading actually works lol
Avatar
Black-throated Blue Warbler
i know, i pulled that from my project 😄
Avatar
buby | Next.js Color PlanetOP
never though im gonna have to actually do that lmao