Skeleton

TS

import { … } from "@fungi.computer/caps/components/skeleton";

Hero

TSX

import { Skeleton } from "@fungi.computer/caps/components/skeleton";

export default function Hero() {
  return (
    <div className="grid w-72 gap-sm">
      <Skeleton aria-label="Loading title" className="block h-5 w-2/3" />
      <Skeleton className="block h-3 w-full" />
      <Skeleton className="block h-3 w-4/5" />
    </div>
  );
}

Placeholders

TSX

import { Skeleton } from "@fungi.computer/caps/components/skeleton";

export default function Placeholders() {
  return (
    <div className="flex items-center gap-md">
      <Skeleton
        aria-label="Loading avatar"
        className="block size-12 rounded-full"
      />
      <div className="grid gap-xs">
        <Skeleton className="block h-4 w-32" />
        <Skeleton className="block h-3 w-20" />
      </div>
    </div>
  );
}

Loaded

TSX

import { Button } from "@fungi.computer/caps/components/button";
import { Skeleton } from "@fungi.computer/caps/components/skeleton";
import { useState } from "react";

export default function Loaded() {
  const [loaded, setLoaded] = useState(false);
  const reload = () => {
    setLoaded(false);
    window.setTimeout(() => {
      setLoaded(true);
    }, 900);
  };
  return (
    <div className="grid max-w-sm gap-sm">
      <Button size="sm" onClick={reload}>
        Reload patch notes
      </Button>
      {loaded ? (
        <p className="text-sm">The hollow still has chanterelles.</p>
      ) : (
        <Skeleton
          aria-label="Loading patch notes"
          className="block h-4 w-full"
        />
      )}
    </div>
  );
}