Full page loading state

<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"
import { Spinner } from "@/components/ui/spinner"
</script>

<template>
  <Card class="min-h-[200px] w-full max-w-xs">
    <CardContent class="flex grow flex-col items-center justify-center gap-4">
      <Spinner class="size-4 opacity-50" />
      <div class="flex flex-col items-center gap-1">
        <p class="text-sm font-medium">Setting up your workspace</p>
        <p class="text-muted-foreground text-xs">
          This may take a few seconds...
        </p>
      </div>
    </CardContent>
  </Card>
</template>