Spinner in empty state.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
import { Spinner } from "@/components/ui/spinner"
</script>

<template>
  <div class="flex items-center justify-center">
    <Empty class="min-h-[300px] w-full max-w-md">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Spinner class="size-4" />
        </EmptyMedia>
        <EmptyTitle>Loading projects</EmptyTitle>
        <EmptyDescription>
          Please wait while we fetch your project data. This should only take
          a moment.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" disabled>
          Cancel
        </Button>
      </EmptyContent>
    </Empty>
  </div>
</template>