Loading swap

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { LoadingSwap } from "@/components/ui/loading-swap"
import { Skeleton } from "@/components/ui/skeleton"

export function LoadingSwapDemo() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if (!loading) return;
    const id = setTimeout(() => setLoading(false), 1400);
    return () => clearTimeout(id);
  }, [loading]);
  return (
    <div className="grid w-full max-w-sm gap-3">
      <div className="rounded-[12px] p-4 shadow-[inset_0_0_0_1px_var(--border)]">
        <LoadingSwap loading={loading} label="Loading the account summary" placeholder={<Skeleton lines={2} avatar label="Loading" />}>
          <div className="grid gap-2 text-sm">
            <p className="font-medium">Ostra Freight</p>
            <p className="text-muted-foreground">Four entities, two currencies. Renewal on 30 October; security review is the last open item before signature.</p>
            <p className="text-muted-foreground">Owner Maya Chen · ARR €48,000 · Health: good</p>
          </div>
        </LoadingSwap>
      </div>
      <Button size="sm" variant="secondary" className="w-fit" onClick={() => setLoading(true)} disabled={loading}>Reload</Button>
    </div>
  );
}