Loading file or suspense?

So I have a basic dashboard page and want to show some loading state for a server component.

import { Suspense } from "react";
import Loading from "@/app/dashboard/loading";
import UserLinks from "@/components/UserLinks";

export default function Page() {
  return (
    <>
      <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
        Dashboard
      </h1>
      <Suspense fallback={<Loading />}>
        {/* @ts-expect-error Async Server Component */}
        <UserLinks />
      </Suspense>
    </>
  );
}

import { Suspense } from "react";
import Loading from "@/app/dashboard/loading";
import UserLinks from "@/components/UserLinks";

export default function Page() {
  return (
    <>
      <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
        Dashboard
      </h1>
      <Suspense fallback={<Loading />}>
        {/* @ts-expect-error Async Server Component */}
        <UserLinks />
      </Suspense>
    </>
  );
}

Instead of just putting UserLinks unwrapped on its own and using the loading.tsx file, I wrapped it in Suspense so that only that part of the component shows loading state (only where its doing async data stuff). Before doing this, the entire page showed whatever is in loading.tsx so all the static text and stuff that could be shown right away was not. I could have put the static stuff in the loading file, but it seems repetitive. Is this a better solution? It seems that next knows not to use the loading file if there is a Suspense in use.

1 Reply

Perfect•2y ago

nvm I forgot about layouts, that solves it

Gaming

Programming

Loading file or suspense?