Loading state for layout.tsx

[joulev]

Currently loading.tsx apparently only supports page.tsx, so something like this won't work

app/
  (auth)/
    dashboard/
      page.tsx
    account/
      page.tsx
    layout.tsx
    loading.tsx

If I use some expensive data fetching method in layout.tsx, like getUser(), I can't use this loading.tsx to display an instant loading state. I need to manually do it like

import { Suspense } from "react";
import { cookies } from "next/headers";
import Loading from "./loading";

async function getUser() {
  const nextCookies = cookies().getAll();
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return { name: "John Doe", cookies: nextCookies };
}

// https://gist.github.com/cramforce/b5e3f0b103f841d2e5e429b1d5ac4ded
function asyncComponent<T, R>(fn: (arg: T) => Promise<R>): (arg: T) => R {
  return fn as (arg: T) => R;
}

const LayoutToBeSuspensed = asyncComponent(
  async ({ children }: React.PropsWithChildren) => {
    const user = await getUser();
    return (
      <div>
        <div>Welcome {user.name}!</div>
        {children}
      </div>
    );
  }
);

export default function Layout({ children }: React.PropsWithChildren) {
  return (
    <Suspense fallback={<Loading />}>
      <LayoutToBeSuspensed>{children}</LayoutToBeSuspensed>
    </Suspense>
  );
}

But loading.tsx for layout may conflict with a loading.tsx for page, so probably a different naming convention is necessary.

So feature request: layout-loading.tsx to display instant loading state for layout.tsx.

[whydea]

I have the same problem

[ciruz]

Hey I just answered a similar question.

Checkout Templates ( https://beta.nextjs.org/docs/routing/pages-and-layouts#templates ), the docs say to Templates:

There may be cases where you need those specific behaviors, and templates would be a more suitable option than layouts. For example:

• To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.

[whydea]

Hello @ciruz
In this example #44385 I am not able to use suspense in root layout file.
I tried now to use suspend in the template.tsx but it doesn't work either

[joulev]

Templates don't really solve this, it is still under the layout file in the React tree and doing anything in it doesn't really solve anything wrt loading state in layouts.

[BensEye]

I would add my vote to this feature request. I find myself needing a loading page for a layout which makes a fetch request, but having to do it manually and thus having to make it a client component.

[sgoodrow]

I think the bigger issue I struggle with is that the filesystem approach to loading/error components separates my happy path from my unhappy path. I want to push loading and error states to the leag components of my pages. This pattern helps minimize layout content shift, since all layout (not just layout components) are shared by the happy and unhappy path for each component.

This is more in line with the Mui Skeleton approach.

The trouble is this requires downloading the whole bundle.

[leodar163]

I kinda found a work around which is to wrap my layout in a suspens in another parent layout.
So for exemple, in the initial case, it would give:

app/
  layout.tsx <--- new parent layout with <Suspens> in it
  (auth)/
    dashboard/
      page.tsx
    account/
      page.tsx
    layout.tsx
    loading.tsx 

export default function PanneauRapportLayout(
  {children}: {children: ReactNode}
) {
  return <Suspense
  fallback={<div>Loading...</div>}>
    {children}
  </Suspense>
}

Work not too bad even if it's not working for every cases