refacto: network load and fake percent
This commit is contained in:
@@ -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 requestCount = Object.keys(activeRequests).length;
|
||||||
const averageProgress = requestCount > 0 ? totalProgress / requestCount : 0;
|
|
||||||
const displayProgress = Math.min(Math.round(averageProgress), 100);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NetworkProgressContext.Provider value={{ startProgress, updateProgress, completeProgress }}>
|
<NetworkProgressContext.Provider value={{ startProgress, updateProgress, completeProgress }}>
|
||||||
@@ -44,23 +41,15 @@ export function NetworkProgressProvider({ children }: { children: React.ReactNod
|
|||||||
{/* Barre de progression en haut */}
|
{/* Barre de progression en haut */}
|
||||||
<div className="fixed top-0 left-0 right-0 z-50">
|
<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-0.5 w-full bg-muted overflow-hidden">
|
||||||
<div
|
<div className="h-full bg-primary animate-pulse" />
|
||||||
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>
|
||||||
</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="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">
|
<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" />
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||||||
<span className="text-xs font-medium">
|
<span className="text-xs font-medium">Chargement</span>
|
||||||
Chargement {displayProgress < 100 && `${displayProgress}%`}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -10,41 +10,11 @@ export function useNetworkRequest() {
|
|||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const currentRequestId = useRef<string | null>(null);
|
const currentRequestId = useRef<string | null>(null);
|
||||||
const abortControllerRef = useRef<AbortController | 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(() => {
|
useEffect(() => {
|
||||||
// Si on a un requestId en cours, c'est que la navigation est terminée
|
// Si on a un requestId en cours, c'est que la navigation est terminée
|
||||||
if (currentRequestId.current) {
|
if (currentRequestId.current) {
|
||||||
updateProgress(currentRequestId.current, 100);
|
updateProgress(currentRequestId.current, 100);
|
||||||
if (progressIntervalRef.current) {
|
|
||||||
clearInterval(progressIntervalRef.current);
|
|
||||||
progressIntervalRef.current = null;
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (currentRequestId.current) {
|
if (currentRequestId.current) {
|
||||||
completeProgress(currentRequestId.current);
|
completeProgress(currentRequestId.current);
|
||||||
@@ -53,12 +23,7 @@ export function useNetworkRequest() {
|
|||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cleanup
|
|
||||||
return () => {
|
return () => {
|
||||||
if (progressIntervalRef.current) {
|
|
||||||
clearInterval(progressIntervalRef.current);
|
|
||||||
progressIntervalRef.current = null;
|
|
||||||
}
|
|
||||||
if (abortControllerRef.current) {
|
if (abortControllerRef.current) {
|
||||||
abortControllerRef.current.abort();
|
abortControllerRef.current.abort();
|
||||||
abortControllerRef.current = null;
|
abortControllerRef.current = null;
|
||||||
@@ -68,39 +33,23 @@ export function useNetworkRequest() {
|
|||||||
|
|
||||||
const executeRequest = useCallback(
|
const executeRequest = useCallback(
|
||||||
async <T>(requestFn: () => Promise<T>): Promise<T> => {
|
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) {
|
if (!currentRequestId.current) {
|
||||||
currentRequestId.current = Math.random().toString(36).substring(7);
|
currentRequestId.current = Math.random().toString(36).substring(7);
|
||||||
startProgress(currentRequestId.current);
|
startProgress(currentRequestId.current);
|
||||||
|
|
||||||
// Création d'un nouveau AbortController pour cette requête
|
|
||||||
abortControllerRef.current = new AbortController();
|
abortControllerRef.current = new AbortController();
|
||||||
|
|
||||||
// On commence à 10% et on simule jusqu'à 30%
|
|
||||||
updateProgress(currentRequestId.current, 10);
|
|
||||||
simulateProgress(currentRequestId.current, 10, 30);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// On wrap la fonction de requête pour intercepter les appels fetch
|
|
||||||
const wrappedFn = async () => {
|
const wrappedFn = async () => {
|
||||||
const originalFetch = window.fetch;
|
const originalFetch = window.fetch;
|
||||||
window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
|
window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
|
||||||
if (!currentRequestId.current) return originalFetch(input, init);
|
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, {
|
const response = await originalFetch(input, {
|
||||||
...init,
|
...init,
|
||||||
signal: abortControllerRef.current?.signal,
|
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;
|
return response;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -113,11 +62,6 @@ export function useNetworkRequest() {
|
|||||||
|
|
||||||
return await wrappedFn();
|
return await wrappedFn();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// En cas d'erreur, on nettoie tout
|
|
||||||
if (progressIntervalRef.current) {
|
|
||||||
clearInterval(progressIntervalRef.current);
|
|
||||||
progressIntervalRef.current = null;
|
|
||||||
}
|
|
||||||
if (currentRequestId.current) {
|
if (currentRequestId.current) {
|
||||||
completeProgress(currentRequestId.current);
|
completeProgress(currentRequestId.current);
|
||||||
currentRequestId.current = null;
|
currentRequestId.current = null;
|
||||||
@@ -128,7 +72,7 @@ export function useNetworkRequest() {
|
|||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[startProgress, updateProgress, completeProgress, simulateProgress]
|
[startProgress, updateProgress, completeProgress]
|
||||||
);
|
);
|
||||||
|
|
||||||
return { executeRequest };
|
return { executeRequest };
|
||||||
|
|||||||
@@ -93,6 +93,7 @@ class ServerCacheService {
|
|||||||
type: keyof typeof ServerCacheService.DEFAULT_TTL = "DEFAULT"
|
type: keyof typeof ServerCacheService.DEFAULT_TTL = "DEFAULT"
|
||||||
): Promise<T> {
|
): Promise<T> {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
|
console.log("👀 Getting or setting cache for key:", key);
|
||||||
const cached = this.cache.get(key);
|
const cached = this.cache.get(key);
|
||||||
|
|
||||||
if (cached && cached.expiry > now) {
|
if (cached && cached.expiry > now) {
|
||||||
|
|||||||
Reference in New Issue
Block a user