import { Spinner } from './spinner';
import styles from './page-loading.module.scss';

/**
 * 라우트 세그먼트가 스트리밍되는 동안의 폴백. 화면 네 곳의 `loading.tsx`가 같은 모양이라
 * 여기 한 번만 둔다 — Next.js는 세그먼트마다 `loading.tsx` 파일을 요구하지만 내용은 공유할
 * 수 있다.
 *
 * 상태를 갖지 않아 Server Component로 충분하다.
 */
export function PageLoading() {
  return (
    <section className={styles.root}>
      <Spinner size="lg" />
    </section>
  );
}