julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine loading states in MetricsTab

Browse Source 
- 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.
This commit is contained in:
Julien Froidefond
2025-09-21 06:42:26 +02:00
parent 6e2b0abc8d
commit c5bfcc50f8
1 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/dashboard/MetricsTab.tsx
View File

@@ -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>