Loading component for all pages #61324

JorensM · 2024-01-29T12:43:15Z

JorensM
Jan 29, 2024

Goals

Make it easier to create a loading component when you want a single one for the entire app

Non-Goals

Background

I'm just trying out Next.JS and found it strange that you must define a loading.tsx component for each page separately for it to show. I'd like for it to be possible show a single loading component between every single page in the app without the need to create a separate loading.tsx file for each page

Proposal

Not sure how to implement this but I'm interested in contributing to this.

808vita · 2024-01-29T18:48:02Z

808vita
Jan 29, 2024

If you are using app router use this doc link
Add your component into layout.tsx . pasting snippet below for convenience.

Create a new app/layout.tsx file inside the app directory. This is a root layout that will apply to all routes inside app.

app/layout.tsx

TypeScript

export default function RootLayout({
  // Layouts must accept a children prop.
  // This will be populated with nested layouts or pages
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

The app directory must include a root layout.
The root layout must define , and tags since Next.js does not automatically create them
The root layout replaces the pages/_app.tsx and pages/_document.tsx files.
.js, .jsx, or .tsx extensions can be used for layout files.

If you are using pages router use this doc link
Add your component into _app.tsx . pasting snippet below for convenience.

Usage
To override the default App, create the file pages/_app as shown below:

pages/_app.tsx

TypeScript

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Good to know
If your app is running and you added a custom App, you'll need to restart the development server. Only required if pages/_app.js didn't exist before.

2 replies

JorensM Jan 30, 2024
Author

You must've misunderstood my proposal. I already have a root layout. I'm talking about the Loading component that you can define in a loading.tsx file

damianlluch Feb 22, 2024

This is valid for NextJS 14? I have created the _app.tsx inside the app folder and in the root of the project and I can't get it to run.

alenvuletic · 2024-08-27T07:07:34Z

alenvuletic
Aug 27, 2024

+1

0 replies

aprilmintacpineda · 2024-09-05T03:01:08Z

aprilmintacpineda
Sep 5, 2024

Yes please, I've experimented on this and found the following:

I can add app/error.tsx and if I throw errors on any pages, this error page will be used when there's no error.tsx on that page.
I can add app/loading.tsx which didn't seem to take effect on the individual pages, when there's no loading.tsx on the page itself, nothing will be displayed as loading indicator on the client, and the client has to wait for the new page to finish rendering before the route changes, unlike when there's a loading.tsx on the page, the route changes immediately and renders the loading indicator.

1 reply

sadekomar Sep 18, 2024

I'm having the same issue. Have you found a way around it yet?

JuanGarcia0323 · 2025-01-25T15:40:44Z

JuanGarcia0323
Jan 25, 2025

The closest thing that I found is defining a component Loading.tsx, importing it inside my folder and exporting it

import Loading from "@/components/ui/loading"; export default Loading;

0 replies

alinchiuaru · 2025-05-28T15:19:58Z

alinchiuaru
May 28, 2025

Just stumbled into this, the way I handled this was to wrap the children from the root layout with a Suspense and have the fallback be the loading component.

// app/layout.ts
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        {/* Place children where you want to render a page or nested layout */}
        <Suspense fallback={<Loading />}>
            {children}
        </Suspense>
      </body>
    </html>
  )
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Loading component for all pages #61324

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Loading component for all pages #61324

Uh oh!

Goals

Non-Goals

Background

Proposal

Replies: 5 comments · 3 replies

Uh oh!

Uh oh!

JorensM Jan 30, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 3 replies

JorensM Jan 30, 2024
Author