loading screen for client-side JavaScript?
Unanswered
buby | Next.js Color Planet posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
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](https://cdn.discordapp.com/avatars/301376057326567425/788b75eb8862277af3d31d317ada783f.webp?size=256)
B33fb0n3
you can use the loading.tsx to show a loading screen. Do I miss something in your question? 🤔
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
buby | Next.js Color PlanetOP
I mean, when the client-side JavaScript is being loaded
![Avatar](https://cdn.discordapp.com/avatars/301376057326567425/788b75eb8862277af3d31d317ada783f.webp?size=256)
B33fb0n3
yea, the suspense boundary from it should cover the loading part
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
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](https://cdn.discordapp.com/attachments/1266381953238569032/1266390740225757204/image.png?ex=66a4f9c8&is=66a3a848&hm=686980f8981a72ff319d12529c99001ca14ac657644a38111e854a5c647454fb&)
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
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](https://cdn.discordapp.com/attachments/1266381953238569032/1266393351637176457/image.png?ex=66a4fc37&is=66a3aab7&hm=fd36f73f8e7063ddf4af3f82556518fb96b9a03e591a9c21b2336c8891dd2290&)
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Black-throated Blue Warbler
gotcha, looks like initial load took a while but those subsequent fetches still very fast, tried clearing your cache?
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
buby | Next.js Color PlanetOP
wait, browser cache or the one on the project directory?
i tested this while in incognito though
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Black-throated Blue Warbler
the next.js cache that is automatically applied to fetches
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
buby | Next.js Color PlanetOP
setting artificial loading actually works lol
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Black-throated Blue Warbler
i know, i pulled that from my project 😄
![Avatar](https://cdn.discordapp.com/avatars/314668561706647552/aaea9d59db69d5e05a8c8202d2386a45.webp?size=256)
buby | Next.js Color PlanetOP
never though im gonna have to actually do that lmao