Next.js Discord

Discord Forum

Loading

Answered
Munchkin posted this in #help-forum
Open in Discord
MunchkinOP
I'm trying to use the loading functionality; and I thought that Next would pick the closest loading to the directory.

Unfortunately is not picking my loading.js. Is there anything specific that I must set? If I put it in my App main directory it does the same loading for everyone.
Answered by joulev
loading.js only wraps the page.js inside a Suspense, it doesn't affect the layout. you have to manually wrap the layout in Suspense like so
import { Suspense } from "react";

function LoadingLayout() {
  return <div>Loading...</div>;
}

async function ActualLayout({ children }: { children: React.ReactNode }) {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return (
    <div>
      <h1>Layout</h1>
      <div>{children}</div>
    </div>
  );
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<LoadingLayout />}>
      <ActualLayout>{children}</ActualLayout>
    </Suspense>
  );
}
View full answer

10 Replies

Gulf menhaden
does making it loading.tsx solve the issue maybe ? "it's just a wild guess"
MunchkinOP
It kinda loaded now. But if my layout takes long; it just don't.
Blue-footed Booby
Try to use jsx/tsx extention
@Munchkin It kinda loaded now. But if my layout takes long; it just don't.
Gulf menhaden
do you have a fetch call in your layout and in your page ?
MunchkinOP
I have a fetch call in my layout inside dashboard. My page does not.
Does loading listens for the children based on his position?
I thought it would listen to same label directories.
@Blue-footed Booby Try to use jsx/tsx extention
MunchkinOP
extension doesn't affect at all.
Gulf menhaden
it should listen to the same label directories. the anwser is out of my scope of knowledge
@Munchkin I'm trying to use the loading functionality; and I thought that Next would pick the closest loading to the directory. Unfortunately is not picking my loading.js. Is there anything specific that I must set? If I put it in my App main directory it does the same loading for everyone.
joulev
loading.js only wraps the page.js inside a Suspense, it doesn't affect the layout. you have to manually wrap the layout in Suspense like so
import { Suspense } from "react";

function LoadingLayout() {
  return <div>Loading...</div>;
}

async function ActualLayout({ children }: { children: React.ReactNode }) {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return (
    <div>
      <h1>Layout</h1>
      <div>{children}</div>
    </div>
  );
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<LoadingLayout />}>
      <ActualLayout>{children}</ActualLayout>
    </Suspense>
  );
}
Answer