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 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>
|
||||
</>
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user