loading screen for client-side JavaScript?
Unanswered
buby | Next.js Color Planet posted this in #help-forum
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
@buby | Next.js Color Planet 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?
you can use the loading.tsx to show a loading screen. Do I miss something in your question? 🤔
@B33fb0n3 you can use the loading.tsx to show a loading screen. Do I miss something in your question? 🤔
I mean, when the client-side JavaScript is being loaded
@buby | Next.js Color Planet I mean, when the client-side JavaScript is being loaded
yea, the suspense boundary from it should cover the loading part
@B33fb0n3 yea, the suspense boundary from it should cover the loading part
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>
)
}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
@Black-throated Blue Warbler you're trying to view the loader on a request that only takes 129ms to complete? dont blink
tbf it isn't exactly the full context and i was trying to simulate loading my site on a slower connection
Black-throated Blue Warbler
gotcha, looks like initial load took a while but those subsequent fetches still very fast, tried clearing your cache?
@Black-throated Blue Warbler gotcha, looks like initial load took a while but those subsequent fetches still very fast, tried clearing your cache?
wait, browser cache or the one on the project directory?
i tested this while in incognito though
Black-throated Blue Warbler
the next.js cache that is automatically applied to fetches
Black-throated Blue Warbler
i know, i pulled that from my project 😄
never though im gonna have to actually do that lmao