Next.js Discord

Discord Forum

loading component never shown

Unanswered
Bombay posted this in #help-forum
Open in Discord
Avatar
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> 
    )
  }
Image

38 Replies

Avatar
Milkfish
In the code, there doesn't seem to be anything triggering the suspense
Avatar
BombayOP
this is before page load . page loads in 1 sec sometime otherwise instant
<Suspense fallback={<Loading/>}>
Avatar
European sprat
doesn't there need to be a fetch or something else happening for the suspense to be triggered?
Avatar
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
Avatar
Milkfish
Suspense is only shown when a child component of the suspense is loading
Avatar
BombayOP
so should suspense trigger when child component dom is rending
Avatar
Milkfish
not while its 'rendering' - but while it's fetching data, or if it's an RSC and it's fetching on the server
Avatar
BombayOP
basically i want a loader in every page till child dom is rendering . how to achieve that
Avatar
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?
Avatar
BombayOP
Image
this appear during loading
only head and foot
Avatar
European sprat
have you tried loading.js?
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states
Avatar
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
Avatar
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
Avatar
Milkfish
There is nothing here that I can see would be triggering suspense
What are you expecting to trigger suspense?
Avatar
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
Avatar
Milkfish
Out of curiosity, when you remove the suspense boundary from the layout page, does the code work?
Avatar
BombayOP
Yes
Avatar
Milkfish
Can I see your loading page quickly too
Avatar
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>
    )
}
Avatar
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
Avatar
BombayOP
my code works with or without boundary .
the problem is wanna show loadr when dom is rendering
:blobsweats:
Avatar
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
Avatar
BombayOP
between two pages till reload happen