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

@@ -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,7 +207,6 @@ export function MetricsTab({ className }: MetricsTabProps) {
           </div>
 
           {/* Tendances de vélocité */}
-          {trends.length > 0 && (
           <Card>
             <CardHeader>
               <div className="flex items-center justify-between">
@@ -216,6 +215,7 @@ export function MetricsTab({ className }: MetricsTabProps) {
                   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>
@@ -224,10 +224,22 @@ export function MetricsTab({ className }: MetricsTabProps) {
               </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>
+              ) : trends.length > 0 ? (
                 <VelocityTrendChart data={trends} />
+              ) : (
+                <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>