AI Loading Skeleton

1"use client";
2 
3import { motion } from "framer-motion";
4 
5type SkeletonItemProps = {
6  width?: string;
7  height?: string;
8  className?: string;
9};
10 
11function SkeletonItem({
12  width = "100%",
13  height = "1rem",
14  className = "",
15}: SkeletonItemProps) {
16  return (
17    <div className={`rounded bg-muted ${className}`} style={{ width, height }}>
18      <motion.div
19        animate={{
20          background: [
21            "linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)",
22            "linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)",
23          ],
24          backgroundPosition: ["200% 0", "-200% 0"],
25        }}
26        transition={{
27          duration: 1.5,
28          repeat: Infinity,
29          ease: "linear",
30        }}
31        className="h-full w-full"
32      />
33    </div>
34  );
35}
36 
37type AILoadingSkeletonProps = {
38  lines?: number;
39};
40 
41export function AILoadingSkeleton({ lines = 4 }: AILoadingSkeletonProps) {
42  return (
43    <div className="w-full max-w-md space-y-3 rounded-2xl border border-border bg-card p-6">
44      {/* Avatar */}
45      <div className="flex items-center gap-3">
46        <SkeletonItem width="3rem" height="3rem" className="rounded-full" />
47        <div className="flex-1 space-y-2">
48          <SkeletonItem width="60%" />
49          <SkeletonItem width="40%" />
50        </div>
51      </div>
52 
53      {/* Content lines */}
54      <div className="space-y-2">
55        {Array.from({ length: lines }).map((_, index) => (
56          <motion.div
57            key={index}
58            initial={{ opacity: 0 }}
59            animate={{ opacity: 1 }}
60            transition={{ delay: index * 0.1 }}
61          >
62            <SkeletonItem width={index === lines - 1 ? "70%" : "100%"} />
63          </motion.div>
64        ))}
65      </div>
66 
67      {/* Actions */}
68      <div className="flex gap-2 pt-2">
69        <SkeletonItem width="4rem" height="2rem" className="rounded-md" />
70        <SkeletonItem width="4rem" height="2rem" className="rounded-md" />
71      </div>
72    </div>
73  );
74}