url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Improve Uptime History Bar Display Speed Immediately

Browse Source 
- Optimize the UptimeBar component to display uptime data immediately and reduce loading delays and background updates
This commit is contained in:
Tola Leng
2025-09-14 02:52:55 +07:00
parent c61a740725
commit 9c44ba6d7f
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/services/UptimeBar.tsx
+8 -6
View File
@@ -25,19 +25,21 @@ const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType =
return start; return start;
}, [endDate, interval]); }, [endDate, interval]);
// Fetch uptime data with very aggressive caching to reduce API calls // Fetch uptime data with immediate display and background updates
const { data: uptimeData = [] } = useQuery({ const { data: uptimeData = [] } = useQuery({
queryKey: ['uptime-bar', serviceId, serviceType], queryKey: ['uptime-bar', serviceId, serviceType],
queryFn: () => uptimeService.getUptimeHistory(serviceId, 20, startDate, endDate, serviceType), queryFn: () => uptimeService.getUptimeHistory(serviceId, 20, startDate, endDate, serviceType),
enabled: !!serviceId, enabled: !!serviceId,
staleTime: 30000, // Data is fresh for 30 seconds staleTime: 300000, // Data stays fresh for 5 minutes - display immediately from cache
gcTime: 600000, // Keep in cache for 10 minutes gcTime: 900000, // Keep in cache for 15 minutes
refetchInterval: 60000, // 1 minute polling refetchInterval: 300000, // Reduced to 5 minute polling
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
refetchOnMount: false, refetchOnMount: false,
refetchOnReconnect: false, refetchOnReconnect: false,
retry: 3, retry: 1, // Reduce retries for faster failure
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), retryDelay: 1000, // Faster retry delay
refetchIntervalInBackground: true, // Allow background updates
placeholderData: (previousData) => previousData, // Keep showing previous data while refetching
}); });
// Memoize the uptime calculation to prevent unnecessary recalculations // Memoize the uptime calculation to prevent unnecessary recalculations