How to implement a loading page on route change in Nextjs 13?

Question

I see that there were event handlers on route change in previous NextJS versions and they are no longer available with Next 13.

Some pages in my project take a couple of seconds to load and I want to display a loading component while the page is being loaded because it feels like there is nothing happening when user clicks on a Link element.

Is there a way to achieve this? Suspense didn't help.

This is my current app/(root)/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Script src="https://telegram.org/js/telegram-web-app.js" />
        <Providers>
            <Suspense fallback={<LoadingPage />}>
              <Header />
              {children}
              <NavigationBar />
            </Suspense>
        </Providers>
        <Toaster
          closeButton={false}
          position="bottom-center"
          toastOptions={{
            duration: 3000,
          }}
        />
      </body>
    </html>
  );
}

However, Suspense doesn't help at all.

Günay Yağcı · Accepted Answer · 2023-10-24 11:07:09Z

3

You can create a file named loading.js under the app folder. This runs the build on this page during route changes. This is a build that comes with the next 13. But its name should definitely be loading.

app>loading.js

const Loading = ()=>{
    return(
        <div>
            test Loading
        </div>
    )
}
export default Loading

Next13 app is valid for router. I would be happy if you let me know the result.

answered Oct 24, 2023 at 11:07

Günay Yağcı

664 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oguzhan Over a year ago

This works just fine! The loading component shows up when the page is loading but it is still not what I exactly want. I rather have a state like "isRouteChanging" and render animation depending on it. I guess I would have to go with SPA if I want to do that and handle state on my own.

Collectives™ on Stack Overflow

How to implement a loading page on route change in Nextjs 13?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related