migrate frontend to use new celery api and improve ux around spinners whilst loading

crawler/frontend/src/components/Spinner.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import React from 'react';
+
+const spinnerVariants = cva('flex-col items-center justify-center', {
+    variants: {
+        show: {
+            true: 'flex',
+            false: 'hidden',
+        },
+    },
+    defaultVariants: {
+        show: true,
+    },
+});
+
+const loaderVariants = cva('animate-spin text-primary', {
+    variants: {
+        size: {
+            small: 'size-6',
+            medium: 'size-8',
+            large: 'size-12',
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+
+interface SpinnerContentProps
+    extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+export function Spinner({ size, show, children, className }: SpinnerContentProps) {
+    return (
+        <span className={spinnerVariants({ show })}>
+            <Loader2 className={cn(loaderVariants({ size }), className)} />
+            {/* <span className="text-red-400">Loading with custom style</span> */}
+            {children}
+        </span>
+    );
+}