mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-12 01:36:43 +02:00
feat: implement shared LoadingModal component and integrate into dashboard route loading states
This commit is contained in:
Michael committed
1 parent
2264ced494
commit
e8fb472a9f
10 files changed
+74
-195
No files matched your search
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
@@ -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..." />;
|
||||
}
|
||||
Reference in new issue
Block a user