Skeleton

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

export default function SkeletonDemo() {
  const [loading, setLoading] = React.useState(true);
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="rounded-xl border border-border bg-card p-4">
        {loading ? (
          <div className="flex gap-3"><Skeleton className="size-10 rounded-full" /><div className="flex-1 space-y-2 pt-1"><Skeleton className="h-3 w-1/2" /><SkeletonText lines={2} /></div></div>
        ) : (
          <div className="flex gap-3"><span className="grid size-10 place-items-center rounded-full bg-muted font-medium">AL</span><div><p className="font-medium">Ada Lovelace</p><p className="text-sm text-muted-foreground">Shipped the analytics engine and wrote the first program.</p></div></div>
        )}
      </div>
      <Button variant="secondary" size="sm" onClick={() => setLoading((l) => !l)}>{loading ? "Show content" : "Show skeleton"}</Button>
    </div>
  );
}