Skeleton loader for a data table.

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton"

const rows = Array.from({ length: 4 })
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col gap-4">
    <div class="flex gap-4 border-b pb-2">
      <Skeleton class="h-4 flex-1" />
      <Skeleton class="h-4 w-24" />
      <Skeleton class="h-4 w-20" />
    </div>
    <div v-for="(_, i) in rows" :key="i" class="flex gap-4">
      <Skeleton class="h-4 flex-1" />
      <Skeleton class="h-4 w-24" />
      <Skeleton class="h-4 w-20" />
    </div>
  </div>
</template>