feat: implement shared LoadingModal component and integrate into dashboard route loading states

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
 }

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..." />;
+}

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>
+    );
+}