refacto: network load and fake percent

This commit is contained in:
Julien Froidefond
2025-02-16 16:33:32 +01:00
parent a2c6bec3b3
commit 2f1dfb8e9a
3 changed files with 5 additions and 71 deletions

View File

@@ -31,10 +31,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 }}>
@@ -44,23 +41,15 @@ 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-0.5 w-full bg-muted overflow-hidden">
<div
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 className="h-full bg-primary animate-pulse" />
</div>
</div>
{/* Indicateur de progression au centre */}
{/* Indicateur de chargement au centre */}
<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>
<span className="text-xs font-medium">Chargement</span>
</div>
</div>
</>

View File

@@ -10,41 +10,11 @@ export function useNetworkRequest() {
const searchParams = useSearchParams();
const currentRequestId = useRef<string | null>(null);
const abortControllerRef = useRef<AbortController | null>(null);
const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
// Fonction pour simuler une progression graduelle
const simulateProgress = useCallback(
(requestId: string, start: number, end: number) => {
let current = start;
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
progressIntervalRef.current = setInterval(() => {
if (current < end) {
current = Math.min(current + Math.random() * 2, end);
if (requestId === currentRequestId.current) {
updateProgress(requestId, current);
}
} else {
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
progressIntervalRef.current = null;
}
}
}, 200);
},
[updateProgress]
);
useEffect(() => {
// Si on a un requestId en cours, c'est que la navigation est terminée
if (currentRequestId.current) {
updateProgress(currentRequestId.current, 100);
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
progressIntervalRef.current = null;
}
setTimeout(() => {
if (currentRequestId.current) {
completeProgress(currentRequestId.current);
@@ -53,12 +23,7 @@ export function useNetworkRequest() {
}, 100);
}
// Cleanup
return () => {
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
progressIntervalRef.current = null;
}
if (abortControllerRef.current) {
abortControllerRef.current.abort();
abortControllerRef.current = null;
@@ -68,39 +33,23 @@ export function useNetworkRequest() {
const executeRequest = useCallback(
async <T>(requestFn: () => Promise<T>): Promise<T> => {
// On démarre un nouveau requestId uniquement si on n'en a pas déjà un
if (!currentRequestId.current) {
currentRequestId.current = Math.random().toString(36).substring(7);
startProgress(currentRequestId.current);
// Création d'un nouveau AbortController pour cette requête
abortControllerRef.current = new AbortController();
// On commence à 10% et on simule jusqu'à 30%
updateProgress(currentRequestId.current, 10);
simulateProgress(currentRequestId.current, 10, 30);
}
try {
// On wrap la fonction de requête pour intercepter les appels fetch
const wrappedFn = async () => {
const originalFetch = window.fetch;
window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
if (!currentRequestId.current) return originalFetch(input, init);
// On passe à 40% quand la requête démarre
updateProgress(currentRequestId.current, 40);
simulateProgress(currentRequestId.current, 40, 80);
const response = await originalFetch(input, {
...init,
signal: abortControllerRef.current?.signal,
});
// On passe à 90% quand la requête est terminée
updateProgress(currentRequestId.current, 90);
simulateProgress(currentRequestId.current, 90, 95);
return response;
};
@@ -113,11 +62,6 @@ export function useNetworkRequest() {
return await wrappedFn();
} catch (error) {
// En cas d'erreur, on nettoie tout
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
progressIntervalRef.current = null;
}
if (currentRequestId.current) {
completeProgress(currentRequestId.current);
currentRequestId.current = null;
@@ -128,7 +72,7 @@ export function useNetworkRequest() {
throw error;
}
},
[startProgress, updateProgress, completeProgress, simulateProgress]
[startProgress, updateProgress, completeProgress]
);
return { executeRequest };

View File

@@ -93,6 +93,7 @@ class ServerCacheService {
type: keyof typeof ServerCacheService.DEFAULT_TTL = "DEFAULT"
): Promise<T> {
const now = Date.now();
console.log("👀 Getting or setting cache for key:", key);
const cached = this.cache.get(key);
if (cached && cached.expiry > now) {