I want a suspense (initial loading of the page while page's assets are being fetched)
My assets are the images implemented in the home screen or children of RootLayout
How can I make a initial Loading to the children?
export default function RootLayout() {
return (
<html translate="no">
<head></head>
<body>
<Suspense fallback={<div>loading...</div>}> //suspense here
<Header />
{children}
<Footer />
</Suspense>
</body>
</html>
);
}
You can create a
loading.jsxorloading.tsxunder your page folder to create a loading till all your assets are loaded.Reference: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming