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

refacto: network loader is now truther

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-16 16:21:40 +01:00
parent cd6622f72b
commit a2c6bec3b3
2 changed files with 125 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ui/network-progress.tsx
View File

@@ -34,6 +34,7 @@ export function NetworkProgressProvider({ children }: { children: React.ReactNod
const totalProgress = Object.values(activeRequests).reduce((acc, curr) => acc + curr, 0);
const requestCount = Object.keys(activeRequests).length;
const averageProgress = requestCount > 0 ? totalProgress / requestCount : 0;
const displayProgress = Math.min(Math.round(averageProgress), 100);
return (
<NetworkProgressContext.Provider value={{ startProgress, updateProgress, completeProgress }}>
@@ -42,19 +43,24 @@ export function NetworkProgressProvider({ children }: { children: React.ReactNod
<>
{/* Barre de progression en haut */}
<div className="fixed top-0 left-0 right-0 z-50">
<div className="h-1 w-full bg-muted">
<div className="h-0.5 w-full bg-muted overflow-hidden">
<div
className="h-full bg-primary transition-all duration-300 ease-out"
style={{ width: `${averageProgress}%` }}
className="h-full bg-primary transition-all ease-in-out duration-300"
style={{
width: `${averageProgress}%`,
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
}}
/>
</div>
</div>
{/* Indicateur de progression au centre */}
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
<div className="bg-background/80 backdrop-blur-sm rounded-lg p-4 flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm font-medium">{Math.round(averageProgress)}%</span>
<div className="fixed top-14 left-1/2 transform -translate-x-1/2 z-50">
<div className="bg-background/80 backdrop-blur-sm rounded-lg px-3 py-1.5 flex items-center gap-2 shadow-sm">
<Loader2 className="h-3 w-3 animate-spin" />
<span className="text-xs font-medium">
Chargement {displayProgress < 100 && `${displayProgress}%`}
</span>
</div>
</div>
</>