[NextJS] Skeleton (스켈레톤)

[NextJS] Skeleton (스켈레톤)

영상

반응형

---

 

Code

로딩 시 보여주고 싶은 페이지의 자식으로 loading.tsx (jsx) 파일을 만듭니다.

loading.tsx(jsx) 파일을 만들면 Next.js가 알아서 로딩 시 동작합니다.

// app/products/[id]/loading.tsx

import { PhotoIcon } from "@heroicons/react/24/solid";

export default function Loading() {
  return (
    <div className="animate-pulse p-5 flex flex-col gap-5">
      <div className="aspect-square border-neutral-700 text-neutral-700 border-4 border-dashed rounded-md flex justify-center items-center">
        <PhotoIcon className="h-28" />
      </div>
      <div className="flex gap-2 items-center">
        <div className="size-14 rounded-full bg-neutral-700" />
        <div className="flex flex-col gap-1">
          <div className="h-5 w-40 bg-neutral-700 rounded-md" />
          <div className="h-5 w-20 bg-neutral-700 rounded-md" />
        </div>
      </div>
      <div className="h-10 w-80 bg-neutral-700 rounded-md" />
    </div>
  );
}

 

로딩 시 화면을 보기 위해 setTimeOut을 사용하였습니다.

 

아래의 코드는 처음 5초 동안은 loading.tsx 파일의 화면을 보여주며,

5초 후 가져온 데이터를 보여줍니다.

 

// app/products/[id]/page.tsx

async function getProduct() {
  await new Promise((resolve) => setTimeout(resolve, 5000));
}

export default async function ProductDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  const product = await getProduct();
  return <span>Product detail of the product {id}</span>;
}