Init project

assets/controllers/component/loader_progress_bar_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "loaderWrapper",
+    "loaderProgressBar",
+    "list",
+    "imagesWrapper",
+  ];
+
+  connect() {
+    if (!this.hasListTarget || !this.hasImagesWrapperTarget) {
+      return;
+    }
+    const images = Array.from(this.listTarget.querySelectorAll("img"));
+
+    // 1️⃣ avant chargement → tout cacher
+    this.loaderWrapperTarget.classList.add("hidden");
+    this.imagesWrapperTarget.style.opacity = 0;
+
+    if (images.length > 0) {
+      this.trackImages(images);
+    }
+  }
+
+  trackImages(images) {
+    let loadedCount = 0;
+
+    // 2️⃣ début du chargement → afficher le loader
+    this.loaderWrapperTarget.classList.remove("hidden");
+    this.loaderProgressBarTarget.style.width = "0%";
+
+    images.forEach((img) => {
+      if (img.complete) {
+        loadedCount++;
+        this.updateProgress(loadedCount, images.length);
+      } else {
+        img.addEventListener("load", () => {
+          loadedCount++;
+          this.updateProgress(loadedCount, images.length);
+        });
+        img.addEventListener("error", () => {
+          loadedCount++;
+          this.updateProgress(loadedCount, images.length);
+        });
+      }
+    });
+  }
+
+  updateProgress(loadedCount, total) {
+    const progress = (loadedCount / total) * 100;
+    this.loaderProgressBarTarget.style.width = `${progress}%`;
+
+    if (loadedCount === total) {
+      // 3️⃣ chargement terminé → masquer le loader + afficher les images
+      setTimeout(() => {
+        this.loaderWrapperTarget.classList.add("hidden");
+
+        this.imagesWrapperTarget.style.transition = "opacity .3s ease";
+        this.imagesWrapperTarget.style.opacity = 1;
+      }, 200);
+    }
+  }
+}