1 reply

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

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

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.

TTC

Theo's Typesafe Cult•3y ago•

1 reply

Perfect

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

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

loading.tsx

Loading file or suspense?

Similar Threads

Loading file or suspense?

Similar Threads

Similar Threads

Similar Threads