loading component never shown
Unanswered
Bombay posted this in #help-forum
BombayOP
import { ReactNode } from "react"
import Header from "./navbar/navbar"
import Footer from "./footer"
import '../App.css'
import '../index.css'
import { NextAuthProvider } from "./provider";
import Loading from "./loading";
import { Suspense } from "react";
export default async function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: ReactNode
}) {
return (
<html lang="en">
<meta charSet="utf-8" />
<title>Orator Bot</title>
<meta name="next-head-count" content="3" />
<link rel="apple-touch-icon" href="/img/logo.jpg" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta
name="description"
content="Text to Speech discord bot with 50+ languages and custom voices."
/>
<body>
< Header />
<Suspense fallback={<Loading/>}>
<NextAuthProvider> {children} </NextAuthProvider>
</Suspense>
< Footer />
</body>
</html>
)
}
38 Replies
Milkfish
In the code, there doesn't seem to be anything triggering the suspense
BombayOP
this is before page load . page loads in 1 sec sometime otherwise instant
<Suspense fallback={<Loading/>}>
European sprat
doesn't there need to be a fetch or something else happening for the suspense to be triggered?
BombayOP
oh i thought suspense is shown whenever something is loading
is there way to accomplish the loading screen for every page till dom has rendered
Milkfish
Suspense is only shown when a child component of the suspense is loading
BombayOP
so should suspense trigger when child component dom is rending
Milkfish
not while its 'rendering' - but while it's fetching data, or if it's an RSC and it's fetching on the server
BombayOP
basically i want a loader in every page till child dom is rendering . how to achieve that
Milkfish
Next has inbuilt support in the new app route for transitions, so it shouldn't be something you really have to take care of
What's the use case?
BombayOP
this appear during loading
only head and foot
European sprat
have you tried loading.js?
Milkfish
I understand... but it's hard to understand why this is happening without also seeing the page code...
If you want to just wrap pages with suspense you can use the Loading.jsx file
If you want to just wrap pages with suspense you can use the Loading.jsx file
BombayOP
ok giving code
this is homepage
//import Loading from "./loading";
import Droppage from "../components/droppage.jsx";
import Features from "../components/features.jsx";
import Premium from "../components/premium.jsx";
import Curves from "../components/curve1.jsx";
import Curve3 from "../components/curve3.jsx";
//import { Suspense } from "react";
const homepage = () => {
return (
<div className='animate-in pt-16 fade-in'>
<Droppage/>
<Curves/>
<Features/>
<Curve3/>
<Premium/>
{/* testing toasts you can add dynamically when ever required */}
</div>
)
}
export default homepage
Milkfish
There is nothing here that I can see would be triggering suspense
What are you expecting to trigger suspense?
BombayOP
Ah lets summarise this. Suspense doesn't trigger on rendering right? So i want to show a loading screen/splash screen till dom is rendering
With suspense it wouldn't be possible to show loader while is dom is rendering so how to show loader
Milkfish
Out of curiosity, when you remove the suspense boundary from the layout page, does the code work?
BombayOP
Yes
Milkfish
Can I see your loading page quickly too
BombayOP
Why it won't?
One sec
import '../loading.css'
export default function Loading() {
return (
<div>
<div className="loading-container">
<div className="loading"></div>
<div className="loading-text">Loading</div>
</div>
</div>
)
}
Milkfish
I was asking because it seems like in your code above that the Suspense boundary is triggering (which is why it's blank - since you said it normally works without the boundary)
So I was cuious whether it was your loading page not working
Sorry - not sure on this one
BombayOP
my code works with or without boundary .
the problem is wanna show loadr when dom is rendering
the problem is wanna show loadr when dom is rendering
BombayOP
when the page is first loaded there is no issue but when i navigate to other page for half a second (when page is loading) i only see head and foot then the page appears
after that navigation is smooth
BombayOP
between two pages till reload happen