Line Wobble Loader

npm install @craftdotui/loaders

import LineWobble from "@craftdotui/loaders/line-wobble";
import { Card } from "@/components/ui/card";

export default function LoadingSection() {
  return (
    <Card className="p-8">
      <div className="flex flex-col items-center gap-4">
        <h3 className="text-lg font-semibold">Loading Content</h3>
        <LineWobble />
      </div>
    </Card>
  );
}

import LineWobble from "@craftdotui/loaders/line-wobble";

export default function PageTopLoader({ isLoading }) {
  if (!isLoading) return null;
  
  return (
    <div className="fixed top-0 left-0 right-0 flex items-center justify-center p-4 bg-background/95 backdrop-blur-sm border-b">
      <LineWobble />
    </div>
  );
}

import LineWobble from "@craftdotui/loaders/line-wobble";
import { Button } from "@/components/ui/button";

export default function SubmitForm({ onSubmit, isSubmitting }) {
  return (
    <form onSubmit={onSubmit} className="space-y-4">
      {/* Form fields */}
      
      <div className="space-y-3">
        <Button type="submit" disabled={isSubmitting} className="w-full">
          {isSubmitting ? "Submitting..." : "Submit"}
        </Button>
        
        {isSubmitting && (
          <div className="flex justify-center">
            <LineWobble />
          </div>
        )}
      </div>
    </form>
  );
}

import LineWobble from "@craftdotui/loaders/line-wobble";

export default function ContentLoader({ isLoading, content }) {
  if (isLoading) {
    return (
      <div className="space-y-4 p-6">
        <div className="h-6 w-3/4 bg-muted rounded animate-pulse" />
        <div className="h-4 w-full bg-muted rounded animate-pulse" />
        <div className="h-4 w-5/6 bg-muted rounded animate-pulse" />
        <div className="flex justify-center mt-6">
          <LineWobble />
        </div>
      </div>
    );
  }
  
  return <div>{content}</div>;
}