Skeleton

1
import { Skeleton } from "~/components/ui/skeleton";
2

3
export default function SkeletonDemo() {
4
  return (
5
    <div class="flex items-center gap-4">
6
      <Skeleton class="h-12 w-12 rounded-full" />
7
      <div class="space-y-2">
8
        <Skeleton class="h-4 w-[250px]" />
9
        <Skeleton class="h-4 w-[200px]" />
10
      </div>
11
    </div>
12
  );
13
}

1
import { Skeleton } from "~/components/ui/skeleton";
2

3
export default function SkeletonAvatar() {
4
  return (
5
    <div class="flex w-fit items-center gap-4">
6
      <Skeleton class="size-10 shrink-0 rounded-full" />
7
      <div class="grid gap-2">
8
        <Skeleton class="h-4 w-[150px]" />
9
        <Skeleton class="h-4 w-[100px]" />
10
      </div>
11
    </div>
12
  );
13
}

1
import { Card, CardContent, CardHeader } from "~/components/ui/card";
2
import { Skeleton } from "~/components/ui/skeleton";
3

4
export default function SkeletonCard() {
5
  return (
6
    <Card class="w-full max-w-xs">
7
      <CardHeader>
8
        <Skeleton class="h-4 w-2/3" />
9
        <Skeleton class="h-4 w-1/2" />
10
      </CardHeader>
11
      <CardContent>
12
        <Skeleton class="aspect-video w-full" />
13
      </CardContent>
14
    </Card>
15
  );
16
}

1
import { Skeleton } from "~/components/ui/skeleton";
2

3
export default function SkeletonText() {
4
  return (
5
    <div class="flex w-full max-w-xs flex-col gap-2">
6
      <Skeleton class="h-4 w-full" />
7
      <Skeleton class="h-4 w-full" />
8
      <Skeleton class="h-4 w-3/4" />
9
    </div>
10
  );
11
}

1
import { Skeleton } from "~/components/ui/skeleton";
2

3
export default function SkeletonForm() {
4
  return (
5
    <div class="flex w-full max-w-xs flex-col gap-7">
6
      <div class="flex flex-col gap-3">
7
        <Skeleton class="h-4 w-20" />
8
        <Skeleton class="h-8 w-full" />
9
      </div>
10
      <div class="flex flex-col gap-3">
11
        <Skeleton class="h-4 w-24" />
12
        <Skeleton class="h-8 w-full" />
13
      </div>
14
      <Skeleton class="h-8 w-24" />
15
    </div>
16
  );
17
}

1
import { For } from "solid-js";
2
import { Skeleton } from "~/components/ui/skeleton";
3

4
export default function SkeletonTable() {
5
  return (
6
    <div class="flex w-full max-w-sm flex-col gap-2">
7
      <For each={Array.from({ length: 5 })}>
8
        {() => (
9
          <div class="flex gap-4">
10
            <Skeleton class="h-4 flex-1" />
11
            <Skeleton class="h-4 w-24" />
12
            <Skeleton class="h-4 w-20" />
13
          </div>
14
        )}
15
      </For>
16
    </div>
17
  );
18
}