Skeleton Demo

1"use client";
2 
3import { useEffect, useState } from "react";
4import {
5  Skeleton,
6  SkeletonAvatar,
7  SkeletonText,
8  SkeletonTransition,
9} from "@/components/sora-ui/effects/skeleton";
10 
11const LOADING_DURATION_MS = 2000;
12 
13function ProfileCard() {
14  return (
15    <div className="flex items-center gap-3">
16      <div className="flex size-10 items-center justify-center rounded-full bg-accent font-medium text-sm">
17        AX
18      </div>
19      <div className="flex flex-col gap-1">
20        <p className="font-medium text-sm">Axyl</p>
21        <p className="text-muted-foreground text-xs">
22          Building Sora UI, one primitive at a time.
23        </p>
24      </div>
25    </div>
26  );
27}
28 
29function ProfileSkeleton() {
30  return (
31    <div className="flex items-center gap-3">
32      <SkeletonAvatar />
33      <div className="flex flex-col gap-2">
34        <SkeletonText className="w-24" />
35        <SkeletonText className="w-40" />
36      </div>
37    </div>
38  );
39}
40 
41export default function SkeletonDemo() {
42  const [loading, setLoading] = useState(true);
43 
44  useEffect(() => {
45    const timer = window.setTimeout(
46      () => setLoading(false),
47      LOADING_DURATION_MS
48    );
49    return () => window.clearTimeout(timer);
50  }, []);
51 
52  const replay = () => {
53    setLoading(true);
54    window.setTimeout(() => setLoading(false), LOADING_DURATION_MS);
55  };
56 
57  return (
58    <div className="flex w-full max-w-sm flex-col gap-4 rounded-xl border p-6">
59      <Skeleton className="h-24 w-full" rounded="lg" variant="fade" />
60      <SkeletonTransition loading={loading} skeleton={<ProfileSkeleton />}>
61        <ProfileCard />
62      </SkeletonTransition>
63      <button
64        className="self-start text-muted-foreground text-xs underline underline-offset-2 hover:text-foreground"
65        onClick={replay}
66        type="button"
67      >
68        Replay
69      </button>
70    </div>
71  );
72}