Next.js Discord

Discord Forum

Layout children is not rendering while loading the page

Unanswered
Santhosh Prabhakaran posted this in #help-forum
Open in Discord
Santhosh PrabhakaranOP
This is my layout.tsx file in Next JS 14.
import type { Metadata } from "next";
import "../globals.css";
import Footer from "../../Components/footer";
import Navbar from "../../Components/navbar";
import { NextUIProvider } from "@nextui-org/react";
import Container from "../../Components/container";
import { Prompt } from "next/font/google";
import { GlobalProvider } from "../../context/globalContext";
import { Toaster } from "sonner";
import { SessionProvider } from "next-auth/react";
import { auth } from "../../auth";

const prompt = Prompt({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
});

export const metadata: Metadata = {
  title: "Flight Ferry",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth();

  return (
    <html lang="en">
      <body className={`${prompt.className} flex flex-col justify-between`}>
        <Toaster position="top-center" />
        <NextUIProvider>
          <SessionProvider session={session}>
            <GlobalProvider>
              <Navbar />
              <Container>
                <main>{children}</main>
              </Container>
            </GlobalProvider>
          </SessionProvider>
          <Footer />{" "}
        </NextUIProvider>
      </body>
    </html>
  );
}

When the page gets reloaded, Only the Navbar and Footer components are staying in the UI. The Children element is not visible while the loading is happening. It comes again in the DOM only after the loading is completed. How to fix this issue SInce the UI looks like broken while reloading happens. Any help on this would be appreciated.

0 Replies