CODEWITHSUNDEEP
javascriptreactjsnext.jsstateloading
Omar
Omar

Reputation: 73

Loading page on nextjs 13

Hi im trying to get a loading page to show while website is taking the time to load. as it quite a large website I thought a loading screen would provide the best possible user experience however I cannot seem to figure out how to get it to work on nextjs 13. I have created a simple functional component that says loading... and have imported it directly into my layout.jsx folder.

I am using the app directory method which is quite new and im also new at nextjs so im a little lost ^^

I imagine I might need to set state at some point but I cant seem to figure out when and where to do it

any advice would be great.

thanks

import "./globals.css";
import React, { useState, useEffect } from "react";
import Loading from "../components/loading/loading";

const Layout = ({ children, dataLoaded }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (dataLoaded) {
      setLoading(false);
    }
  }, [dataLoaded]);

  return (
    <body className="app {oswald.className}">
      {loading && <Loading />}
      {children}
    </body>
  );
};

export default Layout;

. . .

Attempt 1 -

After following one of the answers below it does not seem like my loading page is showing up at all. and no errors showing up.

my layout is as follows

layout.jsx

import "./globals.css";
import { Suspense } from "react";
import Loading from "../components/loading/loading";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Suspense fallback={<Loading />}>{children}</Suspense>
      </body>
    </html>
  );
}

LoadingPage.js

const LoadingPage = () => {
  return (
    <div className="loading w-screen h-screen bg-red-100">
      <p>Loading...</p>
    </div>
  );
};

export default LoadingPage;

Loading.js

import LoadingPage from "@/components/loading/loading";

export default function Loading() {
  return <LoadingPage />;
}

Upvotes: 3

Views: 7889

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24980

I would want to enhance @saguirrews answer with more details.

Creating loading.js/loading.tsx in any specific folder app, dashboard and the like, would help you create Loading UI with React Suspense

enter image description here

enter image description here

Example

app/dashboard/loading.tsx

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

app/dashboard/page.tsx

<Layout>
  <Navbar>
  ...
  <Suspense fallback={<Loading/>}>
    <Page/>
  </Suspense>
</Layout>

For more details follow the official docs Nextjs Loading

Upvotes: 1

saguirrews
saguirrews

Reputation: 330

In NextJS 13, there's actually a default way to handle loading states within pages. You can declare a loading.tsx file in your /app directory, with this content:

export default function Loading() {
  return <Loading />
}

Then, inside your Layout, you can wrap your page with a Suspense tag, like this:

<Layout>
  <Navbar>
  ...
  <Suspense fallback={<Loading/>}>
    <Page/>
  </Suspense>
</Layout>

Your loading state will be automatically handled upon navigation.

Upvotes: 7

Related Questions