From e8fb472a9f522547d070c2bfc4fabc5ea06e45cc Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Tue, 7 Apr 2026 17:16:33 +0200
Subject: [PATCH] feat: implement shared LoadingModal component and integrate
 into dashboard route loading states

---
 src/app/(dashboard)/analytics/loading.tsx     | 31 ++-----------
 src/app/(dashboard)/dashboard/loading.tsx     | 28 ++----------
 src/app/(dashboard)/exports/loading.tsx       | 22 ++-------
 src/app/(dashboard)/grid/loading.tsx          | 40 ++---------------
 src/app/(dashboard)/hit-parade/loading.tsx    | 35 ++-------------
 src/app/(dashboard)/publicites/loading.tsx    | 26 ++---------
 src/app/(dashboard)/settings/loading.tsx      | 18 ++------
 src/app/(dashboard)/snapshots/loading.tsx     | 19 ++------
 src/app/(dashboard)/stock-negatif/loading.tsx |  5 +++
 src/components/shared/loading-modal.tsx       | 45 +++++++++++++++++++
 10 files changed, 74 insertions(+), 195 deletions(-)
 create mode 100644 src/app/(dashboard)/stock-negatif/loading.tsx
 create mode 100644 src/components/shared/loading-modal.tsx

diff --git a/src/app/(dashboard)/analytics/loading.tsx b/src/app/(dashboard)/analytics/loading.tsx
index dd99d6d..1f90c2f 100644
--- a/src/app/(dashboard)/analytics/loading.tsx
+++ b/src/app/(dashboard)/analytics/loading.tsx
@@ -1,30 +1,5 @@
+import LoadingModal from "@/components/shared/loading-modal";
+
 export default function AnalyticsLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div className="h-7 w-40 rounded-lg bg-[var(--bg-elevated)]" />
-                <div className="flex gap-2">
-                    <div className="h-9 w-32 rounded-lg bg-[var(--bg-elevated)]" />
-                    <div className="h-9 w-32 rounded-lg bg-[var(--bg-elevated)]" />
-                </div>
-            </div>
-
-            {/* Filter bar */}
-            <div className="h-12 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-
-            {/* Table skeleton */}
-            <div className="rounded-2xl border border-[var(--border)] overflow-hidden bg-[var(--bg-elevated)]">
-                <div className="h-10 bg-[var(--bg-base)] border-b border-[var(--border)]" />
-                {Array.from({ length: 8 }).map((_, i) => (
-                    <div key={i} className="h-10 border-b border-[var(--border)] flex items-center px-4 gap-4">
-                        <div className="h-3 w-32 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-20 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-20 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-16 rounded bg-[var(--border)]" />
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des statistiques analytiques..." />;
 }
diff --git a/src/app/(dashboard)/dashboard/loading.tsx b/src/app/(dashboard)/dashboard/loading.tsx
index 89b212a..f3b9911 100644
--- a/src/app/(dashboard)/dashboard/loading.tsx
+++ b/src/app/(dashboard)/dashboard/loading.tsx
@@ -1,27 +1,5 @@
+import LoadingModal from "@/components/shared/loading-modal";
+
 export default function DashboardLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse">
-            {/* Header skeleton */}
-            <div className="flex items-center justify-between">
-                <div className="h-7 w-48 rounded-lg bg-[var(--bg-elevated)]" />
-                <div className="h-5 w-32 rounded-lg bg-[var(--bg-elevated)]" />
-            </div>
-
-            {/* KPI cards row */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                {Array.from({ length: 4 }).map((_, i) => (
-                    <div key={i} className="h-28 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-                ))}
-            </div>
-
-            {/* Main content area */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="h-64 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-                <div className="h-64 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-            </div>
-
-            {/* Bottom tables */}
-            <div className="h-80 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-        </div>
-    );
+    return <LoadingModal message="Chargement des données" subMessage="Récupération du tableau de bord..." />;
 }
diff --git a/src/app/(dashboard)/exports/loading.tsx b/src/app/(dashboard)/exports/loading.tsx
index 6c6c9ab..96505c3 100644
--- a/src/app/(dashboard)/exports/loading.tsx
+++ b/src/app/(dashboard)/exports/loading.tsx
@@ -1,21 +1,5 @@
-export default function ExportsLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse">
-            {/* Header */}
-            <div className="h-7 w-56 rounded-lg bg-[var(--bg-elevated)]" />
+import LoadingModal from "@/components/shared/loading-modal";
 
-            {/* Table */}
-            <div className="rounded-2xl border border-[var(--border)] overflow-hidden bg-[var(--bg-elevated)]">
-                <div className="h-10 bg-[var(--bg-base)] border-b border-[var(--border)]" />
-                {Array.from({ length: 8 }).map((_, i) => (
-                    <div key={i} className="h-10 border-b border-[var(--border)] flex items-center px-4 gap-4">
-                        <div className="h-3 w-24 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-32 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-20 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-16 rounded bg-[var(--border)]" />
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
+export default function ExportsLoading() {
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des exports..." />;
 }
diff --git a/src/app/(dashboard)/grid/loading.tsx b/src/app/(dashboard)/grid/loading.tsx
index 4d3b3df..9744063 100644
--- a/src/app/(dashboard)/grid/loading.tsx
+++ b/src/app/(dashboard)/grid/loading.tsx
@@ -1,39 +1,5 @@
-export default function GridLoading() {
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-            <div
-                className="flex flex-col items-center gap-5 px-10 py-8 rounded-2xl shadow-2xl border"
-                style={{
-                    background: "var(--bg-elevated)",
-                    borderColor: "var(--border)",
-                }}
-            >
-                {/* Spinner */}
-                <div className="relative w-12 h-12">
-                    <div
-                        className="absolute inset-0 rounded-full border-[3px] animate-spin"
-                        style={{
-                            borderColor: "var(--border)",
-                            borderTopColor: "var(--accent)",
-                        }}
-                    />
-                </div>
+import LoadingModal from "@/components/shared/loading-modal";
 
-                <div className="flex flex-col items-center gap-1.5">
-                    <span
-                        className="text-sm font-semibold tracking-wide"
-                        style={{ color: "var(--text-primary)" }}
-                    >
-                        Chargement des données
-                    </span>
-                    <span
-                        className="text-xs"
-                        style={{ color: "var(--text-muted)" }}
-                    >
-                        Récupération des articles et calcul des scores...
-                    </span>
-                </div>
-            </div>
-        </div>
-    );
+export default function GridLoading() {
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des articles et calcul des scores..." />;
 }
diff --git a/src/app/(dashboard)/hit-parade/loading.tsx b/src/app/(dashboard)/hit-parade/loading.tsx
index d85f2ae..276e208 100644
--- a/src/app/(dashboard)/hit-parade/loading.tsx
+++ b/src/app/(dashboard)/hit-parade/loading.tsx
@@ -1,34 +1,5 @@
+import LoadingModal from "@/components/shared/loading-modal";
+
 export default function HitParadeLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div className="h-7 w-44 rounded-lg bg-[var(--bg-elevated)]" />
-                <div className="flex gap-2">
-                    <div className="h-9 w-28 rounded-lg bg-[var(--bg-elevated)]" />
-                    <div className="h-9 w-28 rounded-lg bg-[var(--bg-elevated)]" />
-                </div>
-            </div>
-
-            {/* Podium / top cards */}
-            <div className="grid grid-cols-3 gap-4">
-                {Array.from({ length: 3 }).map((_, i) => (
-                    <div key={i} className="h-32 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-                ))}
-            </div>
-
-            {/* Rankings table */}
-            <div className="rounded-2xl border border-[var(--border)] overflow-hidden bg-[var(--bg-elevated)]">
-                <div className="h-10 bg-[var(--bg-base)] border-b border-[var(--border)]" />
-                {Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="h-10 border-b border-[var(--border)] flex items-center px-4 gap-4">
-                        <div className="h-3 w-6 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-40 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-24 rounded bg-[var(--border)]" />
-                        <div className="h-3 w-16 rounded bg-[var(--border)]" />
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
+    return <LoadingModal message="Chargement des données" subMessage="Récupération du classement des ventes..." />;
 }
diff --git a/src/app/(dashboard)/publicites/loading.tsx b/src/app/(dashboard)/publicites/loading.tsx
index 8e74239..131b8b2 100644
--- a/src/app/(dashboard)/publicites/loading.tsx
+++ b/src/app/(dashboard)/publicites/loading.tsx
@@ -1,25 +1,5 @@
+import LoadingModal from "@/components/shared/loading-modal";
+
 export default function PublicitesLoading() {
-    return (
-        <div className="min-h-screen bg-gray-50 p-6">
-            <div className="mx-auto max-w-screen-xl">
-                <div className="mb-6 h-9 w-48 animate-pulse rounded-lg bg-gray-200" />
-                <div className="space-y-4">
-                    <div className="h-16 animate-pulse rounded-xl bg-white shadow-sm border border-gray-100" />
-                    <div className="animate-pulse rounded-xl bg-white shadow-sm border border-gray-100">
-                        <div className="h-10 bg-gray-50 rounded-t-xl border-b border-gray-200" />
-                        {Array.from({ length: 8 }).map((_, i) => (
-                            <div key={i} className="flex items-center gap-4 border-b border-gray-100 px-4 py-3">
-                                <div className="h-4 w-12 bg-gray-100 rounded" />
-                                <div className="h-4 flex-1 bg-gray-100 rounded" />
-                                <div className="h-4 w-24 bg-gray-100 rounded" />
-                                <div className="h-4 w-24 bg-gray-100 rounded" />
-                                <div className="h-4 w-28 bg-orange-50 rounded" />
-                                <div className="h-4 w-16 bg-orange-50 rounded" />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des publicités..." />;
 }
diff --git a/src/app/(dashboard)/settings/loading.tsx b/src/app/(dashboard)/settings/loading.tsx
index 0d0039b..7b00b11 100644
--- a/src/app/(dashboard)/settings/loading.tsx
+++ b/src/app/(dashboard)/settings/loading.tsx
@@ -1,17 +1,5 @@
-export default function SettingsLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse max-w-2xl">
-            {/* Header */}
-            <div className="h-7 w-40 rounded-lg bg-[var(--bg-elevated)]" />
+import LoadingModal from "@/components/shared/loading-modal";
 
-            {/* Settings sections */}
-            {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="rounded-2xl border border-[var(--border)] overflow-hidden bg-[var(--bg-elevated)] p-6 flex flex-col gap-4">
-                    <div className="h-5 w-36 rounded bg-[var(--border)]" />
-                    <div className="h-10 rounded-lg bg-[var(--bg-base)]" />
-                    <div className="h-10 rounded-lg bg-[var(--bg-base)]" />
-                </div>
-            ))}
-        </div>
-    );
+export default function SettingsLoading() {
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des paramètres..." />;
 }
diff --git a/src/app/(dashboard)/snapshots/loading.tsx b/src/app/(dashboard)/snapshots/loading.tsx
index 4a4e705..346c5ef 100644
--- a/src/app/(dashboard)/snapshots/loading.tsx
+++ b/src/app/(dashboard)/snapshots/loading.tsx
@@ -1,18 +1,5 @@
-export default function SnapshotsLoading() {
-    return (
-        <div className="flex flex-col gap-6 animate-pulse">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div className="h-7 w-36 rounded-lg bg-[var(--bg-elevated)]" />
-                <div className="h-9 w-36 rounded-lg bg-[var(--bg-elevated)]" />
-            </div>
+import LoadingModal from "@/components/shared/loading-modal";
 
-            {/* Cards grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {Array.from({ length: 6 }).map((_, i) => (
-                    <div key={i} className="h-36 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
-                ))}
-            </div>
-        </div>
-    );
+export default function SnapshotsLoading() {
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des snapshots..." />;
 }
diff --git a/src/app/(dashboard)/stock-negatif/loading.tsx b/src/app/(dashboard)/stock-negatif/loading.tsx
new file mode 100644
index 0000000..f934a03
--- /dev/null
+++ b/src/app/(dashboard)/stock-negatif/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingModal from "@/components/shared/loading-modal";
+
+export default function StockNegatifLoading() {
+    return <LoadingModal message="Chargement des données" subMessage="Récupération des stocks négatifs..." />;
+}
diff --git a/src/components/shared/loading-modal.tsx b/src/components/shared/loading-modal.tsx
new file mode 100644
index 0000000..dc0fd02
--- /dev/null
+++ b/src/components/shared/loading-modal.tsx
@@ -0,0 +1,45 @@
+interface LoadingModalProps {
+    message?: string;
+    subMessage?: string;
+}
+
+export default function LoadingModal({
+    message = "Chargement des données",
+    subMessage = "Veuillez patienter...",
+}: LoadingModalProps) {
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+            <div
+                className="flex flex-col items-center gap-5 px-10 py-8 rounded-2xl shadow-2xl border"
+                style={{
+                    background: "var(--bg-elevated)",
+                    borderColor: "var(--border)",
+                }}
+            >
+                <div className="relative w-12 h-12">
+                    <div
+                        className="absolute inset-0 rounded-full border-[3px] animate-spin"
+                        style={{
+                            borderColor: "var(--border)",
+                            borderTopColor: "var(--accent)",
+                        }}
+                    />
+                </div>
+                <div className="flex flex-col items-center gap-1.5">
+                    <span
+                        className="text-sm font-semibold tracking-wide"
+                        style={{ color: "var(--text-primary)" }}
+                    >
+                        {message}
+                    </span>
+                    <span
+                        className="text-xs"
+                        style={{ color: "var(--text-muted)" }}
+                    >
+                        {subMessage}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}