From c5bfcc50f8d1066ed47801b8eed622b2fb274072 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 21 Sep 2025 06:42:26 +0200
Subject: [PATCH] fix: refine loading states in MetricsTab - Simplified loading
 logic by removing unnecessary trends loading check. - Enhanced UI feedback by
 disabling the weeks selection during trends loading and added a loading state
 for the trends chart. - Improved user experience by displaying a message when
 no velocity data is available.

---
 components/dashboard/MetricsTab.tsx | 52 ++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/components/dashboard/MetricsTab.tsx b/components/dashboard/MetricsTab.tsx
index d75bb16..8ce4a91 100644
--- a/components/dashboard/MetricsTab.tsx
+++ b/components/dashboard/MetricsTab.tsx
@@ -93,7 +93,7 @@ export function MetricsTab({ className }: MetricsTabProps) {
         </div>
       </div>
 
-      {metricsLoading || trendsLoading ? (
+      {metricsLoading ? (
         <Card>
           <CardContent className="p-6 text-center">
             <div className="animate-pulse">
@@ -207,27 +207,39 @@ export function MetricsTab({ className }: MetricsTabProps) {
           </div>
 
           {/* Tendances de vélocité */}
-          {trends.length > 0 && (
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <h3 className="text-lg font-semibold">🚀 Tendances de vélocité</h3>
-                  <select 
-                    value={weeksBack} 
-                    onChange={(e) => setWeeksBack(parseInt(e.target.value))}
-                    className="text-sm border border-[var(--border)] rounded px-2 py-1 bg-[var(--background)]"
-                  >
-                    <option value={4}>4 semaines</option>
-                    <option value={8}>8 semaines</option>
-                    <option value={12}>12 semaines</option>
-                  </select>
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold">🚀 Tendances de vélocité</h3>
+                <select 
+                  value={weeksBack} 
+                  onChange={(e) => setWeeksBack(parseInt(e.target.value))}
+                  className="text-sm border border-[var(--border)] rounded px-2 py-1 bg-[var(--background)]"
+                  disabled={trendsLoading}
+                >
+                  <option value={4}>4 semaines</option>
+                  <option value={8}>8 semaines</option>
+                  <option value={12}>12 semaines</option>
+                </select>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {trendsLoading ? (
+                <div className="h-[300px] flex items-center justify-center">
+                  <div className="animate-pulse text-center">
+                    <div className="h-4 bg-[var(--border)] rounded w-32 mx-auto mb-2"></div>
+                    <div className="h-48 bg-[var(--border)] rounded"></div>
+                  </div>
                 </div>
-              </CardHeader>
-              <CardContent>
+              ) : trends.length > 0 ? (
                 <VelocityTrendChart data={trends} />
-              </CardContent>
-            </Card>
-          )}
+              ) : (
+                <div className="h-[300px] flex items-center justify-center text-[var(--muted-foreground)]">
+                  Aucune donnée de vélocité disponible
+                </div>
+              )}
+            </CardContent>
+          </Card>
 
           {/* Analyses de productivité */}
           <Card>