Subscription finally working!

src/components/ui/loading.tsx

@@ -0,0 +1,41 @@
+'use client';
+import * as React from 'react';
+import { Progress } from '@/components/ui/progress';
+import type * as ProgressPrimitive from '@radix-ui/react-progress';
+
+type Loading_Props = React.ComponentProps<typeof ProgressPrimitive.Root> & {
+  /** how many ms between updates */
+  intervalMs?: number;
+  /** fraction of the remaining distance to add each tick */
+  alpha?: number;
+};
+
+export const Loading: React.FC<Loading_Props> = ({
+  intervalMs = 50,
+  alpha = 0.1,
+  className,
+  ...props
+}: Loading_Props) => {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const id = window.setInterval(() => {
+      setProgress((prev) => {
+        // compute the next progress
+        const next = prev + (100 - prev) * alpha;
+        // optional: round if you want neat numbers
+        return Math.min(100, Math.round(next * 10) / 10);
+      });
+    }, intervalMs);
+
+    return () => window.clearInterval(id);
+  }, [intervalMs, alpha]);
+
+  return (
+    <div className="items-center justify-center w-1/3 m-auto pt-20">
+      <Progress value={progress} className={className} {...props} />
+    </div>
+  );
+};
+
+export default Loading;