import { SkeletonLine, Skeleton } from '@/components/Skeleton'

/**
 * Jede Route hat ein Skelett, das die spaetere Struktur nachbildet.
 * Nie eine leere Seite mit Spinner, siehe docs/09-performance-und-ux.md.
 */
export default function Loading() {
  return (
    <main className="mx-auto max-w-(--container-measure) px-6 py-12">
      <Skeleton className="h-[1.5rem]" width="18rem" />
      <div className="mt-3">
        <SkeletonLine />
        <SkeletonLine width="70%" />
      </div>
      <hr className="my-8 border-line" />
      <Skeleton className="h-[1.125rem]" width="10rem" />
      <div className="mt-4">
        <SkeletonLine />
        <SkeletonLine />
        <SkeletonLine />
      </div>
    </main>
  )
}