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>
</div> </div>
{metricsLoading || trendsLoading ? ( {metricsLoading ? (
<Card> <Card>
<CardContent className="p-6 text-center"> <CardContent className="p-6 text-center">
<div className="animate-pulse"> <div className="animate-pulse">
@@ -207,27 +207,39 @@ export function MetricsTab({ className }: MetricsTabProps) {
</div> </div>
{/* Tendances de vélocité */} {/* Tendances de vélocité */}
{trends.length > 0 && ( <Card>
<Card> <CardHeader>
<CardHeader> <div className="flex items-center justify-between">
<div className="flex items-center justify-between"> <h3 className="text-lg font-semibold">🚀 Tendances de vélocité</h3>
<h3 className="text-lg font-semibold">🚀 Tendances de vélocité</h3> <select
<select value={weeksBack}
value={weeksBack} onChange={(e) => setWeeksBack(parseInt(e.target.value))}
onChange={(e) => setWeeksBack(parseInt(e.target.value))} className="text-sm border border-[var(--border)] rounded px-2 py-1 bg-[var(--background)]"
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={4}>4 semaines</option>
<option value={8}>8 semaines</option> <option value={8}>8 semaines</option>
<option value={12}>12 semaines</option> <option value={12}>12 semaines</option>
</select> </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> </div>
</CardHeader> ) : trends.length > 0 ? (
<CardContent>
<VelocityTrendChart data={trends} /> <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é */} {/* Analyses de productivité */}
<Card> <Card>