Loading Overlay

"use client"

import { LoadingOverlay } from "@/components/ui/loading-overlay"

export default function LoadingOverlayDemo() {
  return (
    <div className="relative h-24 w-full max-w-sm overflow-hidden rounded-md border bg-card">
      <div className="p-3 text-sm text-muted-foreground">Resume preview…</div>
      <LoadingOverlay label="Generating…" size="default" />
    </div>
  )
}

"use client"

import { LoadingOverlay } from "@/components/ui/loading-overlay"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function LoadingOverlayFullcard() {
  return (
    <Card className="relative min-h-72 w-full max-w-sm overflow-hidden">
      <CardHeader>
        <Skeleton className="h-4 w-2/3" />
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-5/6" />
        <Skeleton className="h-3 w-4/6" />
      </CardContent>
      <LoadingOverlay label="Loading resume…" />
    </Card>
  )
}