Spiral Loader

npm install @craftdotui/loaders

import Spiral from "@craftdotui/loaders/spiral";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function LoadingCard({ title = "Loading" }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent className="flex items-center justify-center py-12">
        <Spiral />
      </CardContent>
    </Card>
  );
}

import Spiral from "@craftdotui/loaders/spiral";

export default function FullScreenLoader() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-6">
        <Spiral />
        <div className="text-center space-y-2">
          <h2 className="text-xl font-semibold">Loading</h2>
          <p className="text-sm text-muted-foreground">
            Please wait while we load your content
          </p>
        </div>
      </div>
    </div>
  );
}

import Spiral from "@craftdotui/loaders/spiral";
import { useEffect, useState } from "react";

export default function AsyncLoader({ fetchData }) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    fetchData().then((result) => {
      setData(result);
      setIsLoading(false);
    });
  }, []);
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[300px]">
        <Spiral />
      </div>
    );
  }
  
  return <div>{data}</div>;
}

import Spiral from "@craftdotui/loaders/spiral";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function LoadingModal({ open, title, description }) {
  return (
    <Dialog open={open}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <div className="flex items-center justify-center py-12">
          <Spiral />
        </div>
      </DialogContent>
    </Dialog>
  );
}

import Spiral from "@craftdotui/loaders/spiral";

export default function ContentTransition({ isTransitioning, children }) {
  if (isTransitioning) {
    return (
      <div className="relative min-h-[400px]">
        <div className="absolute inset-0 flex items-center justify-center">
          <Spiral />
        </div>
      </div>
    );
  }
  
  return children;
}