From c904a41d140cb5d46c89c87f2f0637afc39a5e87 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 16 Feb 2025 15:30:33 +0100
Subject: [PATCH] fix(images): no more bullshit percent on load

---
 src/components/ui/image-loader.tsx | 57 ++++--------------------------
 1 file changed, 7 insertions(+), 50 deletions(-)

diff --git a/src/components/ui/image-loader.tsx b/src/components/ui/image-loader.tsx
index 465541b..bad38c0 100644
--- a/src/components/ui/image-loader.tsx
+++ b/src/components/ui/image-loader.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 
@@ -8,60 +7,18 @@ interface ImageLoaderProps {
   isLoading: boolean;
 }
 
-export function ImageLoader({ isLoading }: ImageLoaderProps) {
-  const [progress, setProgress] = useState(0);
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (isLoading) {
-      setShow(true);
-      setProgress(0);
-      const duration = 2000; // 2 secondes
-      const steps = 20;
-      const increment = 90 / steps; // On va jusqu'à 90% max en simulation
-      const stepDuration = duration / steps;
-
-      let currentStep = 0;
-      const interval = setInterval(() => {
-        currentStep++;
-        if (currentStep <= steps) {
-          setProgress((prev) => {
-            const next = prev + increment;
-            return Math.min(next, 90); // Ne pas dépasser 90%
-          });
-        } else {
-          clearInterval(interval);
-        }
-      }, stepDuration);
-
-      return () => clearInterval(interval);
-    } else {
-      setProgress(100);
-      timeout = setTimeout(() => {
-        setShow(false);
-      }, 200);
-    }
-
-    return () => {
-      if (timeout) clearTimeout(timeout);
-    };
-  }, [isLoading]);
-
-  if (!show) return null;
-
+export const ImageLoader = ({ isLoading }: ImageLoaderProps) => {
   return (
     <div
       className={cn(
-        "absolute inset-0 flex flex-col items-center justify-center bg-muted/60 backdrop-blur-[2px] gap-2",
-        "transition-opacity duration-200",
-        isLoading ? "opacity-100" : "opacity-0"
+        "absolute inset-0 flex items-center justify-center bg-background/40 backdrop-blur-[2px] transition-opacity duration-300",
+        isLoading ? "opacity-100" : "opacity-0 pointer-events-none"
       )}
     >
-      <div className="flex flex-col items-center gap-2 bg-background/90 px-4 py-3 rounded-lg shadow-sm">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-        <span className="text-sm text-muted-foreground font-medium">{Math.round(progress)}%</span>
+      <div className="relative h-8 w-8">
+        <div className="absolute inset-0 rounded-full border-2 border-muted/40" />
+        <div className="absolute inset-0 rounded-full border-2 border-primary/80 border-t-transparent animate-spin" />
       </div>
     </div>
   );
-}
+};