Next.js Discord

Discord Forum

How to use individual loading skeleton for individual API endpoint request?

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I am using Nextjs 14 , I need a help/ suggestion. I have a home page where have multiple API request, my question is how to show different loading ui (skeleton) for different api endpoint request?

2 Replies

@West African Lion I am using Nextjs 14 , I need a help/ suggestion. I have a home page where have multiple API request, my question is how to show different loading ui (skeleton) for different api endpoint request?
Ray
hi you could create a component and fetch the data it needs then wrap it with <Suspense /> like this
export async function Page() {
  return (
    <div>
      <Suspense fallback={<ComponentOneSkeleton />}>
        <ComponentOne />
      </Suspense>
      <Suspense fallback={<ComponentTwoSkeleton />}>
        <ComponentTwo />
      </Suspense>
      <Suspense fallback={<ComponentThreeSkeleton />}>
        <ComponentThree />
      </Suspense>
    </div>
  );
}

async function ComponentOne() {
  const data = await fetch("");
  return <div></div>;
}

async function ComponentTwo() {
  const data = await fetch("");
  return <div></div>;
}

async function ComponentThree() {
  const data = await fetch("");
  return <div></div>;
}
https://nextjs.org/learn/dashboard-app/streaming
this chapter from next learn talk about this