Loading Overlay

1"use client";
2
3import { useState } from "react";
4import { Button } from "@/components/ui/button";
5import { LoadingOverlay } from "@/registry/ui";
6
7export function LoadingOverlayDefaultExample() {
8  const [loading, setLoading] = useState(false);
9
10  return (
11    <div className="mx-auto w-full max-w-xl space-y-3">
12      <Button
13        size="sm"
14        onClick={() => {
15          setLoading(true);
16          window.setTimeout(() => setLoading(false), 1200);
17        }}
18      >
19        Simulate loading
20      </Button>
21      <LoadingOverlay loading={loading} message="Fetching analytics...">
22        <div className="rounded-md border bg-card p-6">
23          <h4 className="mb-2 text-sm font-medium">Weekly Revenue</h4>
24          <p className="text-2xl font-semibold">$12,840</p>
25          <p className="text-xs text-muted-foreground">+8.4% from last week</p>
26        </div>
27      </LoadingOverlay>
28    </div>
29  );
30}

1import { LoadingOverlay } from "@/registry/ui";
2
3export function LoadingOverlaySimpleExample() {
4  return (
5    <div className="mx-auto w-full max-w-xl">
6      <LoadingOverlay loading message="Syncing...">
7        <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
8          This content is currently being refreshed.
9        </div>
10      </LoadingOverlay>
11    </div>
12  );
13}