loading.tsx 데모

핵심 코드

// loading.tsx
const Loading = () => {
  return (
    <div className="animate-pulse">
      <div className="h-8 w-64 bg-surface-elevated border border-line-subtle rounded" />
      <div className="h-4 w-full bg-surface-elevated border border-line-subtle rounded" />
    </div>
  );
};

export default Loading;

// page.tsx
export const dynamic = 'force-dynamic';

const Page = async () => {
  // 서버에서 데이터를 가져오는 동안 loading.tsx가 표시됨
  await new Promise((r) => setTimeout(r, 2000));
  return <div>콘텐츠 로드 완료!</div>;
};

설명

• loading.tsx는 자동으로 React Suspense 바운더리를 생성합니다.
• 같은 세그먼트의 page.tsx가 로드되는 동안 loading.tsx가 폴백으로 표시됩니다.
• 서버 컴포넌트의 async 작업(데이터 페칭 등) 중에 동작합니다.
• 스트리밍 렌더링과 함께 사용하면 즉시 로딩 상태를 보여줄 수 있습니다.