Skeleton loader for a list with actions

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

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

<template>
  <div class="mx-auto w-full max-w-xs">
    <!-- Skeleton pattern -->
    <div class="flex flex-col">
      <div class="flex items-center justify-between pb-4">
        <Skeleton class="h-5 w-28" />
        <Skeleton class="h-8 w-20 rounded-md" />
      </div>
      <Separator class="opacity-60" />
      <div
        v-for="(_, i) in rows"
        :key="i"
        class="border-border/60 flex items-center gap-3 border-b py-3 last:border-b-0"
      >
        <Skeleton class="size-9 shrink-0 rounded-full" />
        <div class="flex flex-1 flex-col gap-1.5">
          <Skeleton class="h-3.5 w-32" />
          <Skeleton class="h-3 w-48" />
        </div>
        <Skeleton class="h-7 w-16 rounded-md" />
      </div>
    </div>
  </div>
</template>