diff --git a/apps/web/app/hooks/features/useTimer.ts b/apps/web/app/hooks/features/useTimer.ts index 0a2edc8a2..f29ed1358 100644 --- a/apps/web/app/hooks/features/useTimer.ts +++ b/apps/web/app/hooks/features/useTimer.ts @@ -161,7 +161,7 @@ export function useTimer() { const { firstLoad, firstLoadData: firstLoadTimerData } = useFirstLoad(); // Queries - const { queryCall, loading } = useQuery(getTimerStatusAPI); + const { queryCall, loading, loadingRef } = useQuery(getTimerStatusAPI); const { queryCall: toggleQueryCall } = useQuery(toggleTimerAPI); const { queryCall: startTimerQueryCall } = useQuery(startTimerAPI); const { queryCall: stopTimerQueryCall, loading: stopTimerLoading } = useQuery(stopTimerAPI); @@ -187,6 +187,9 @@ export function useTimer() { const getTimerStatus = useCallback( (deepCheck?: boolean) => { + if (loadingRef.current) { + return; + } return queryCall().then((res) => { if (res.data && !isEqual(timerStatus, res.data)) { setTimerStatus((t) => { @@ -199,7 +202,7 @@ export function useTimer() { return res; }); }, - [timerStatus, setTimerStatus, queryCall] + [timerStatus, setTimerStatus, queryCall, loadingRef] ); const toggleTimer = useCallback( diff --git a/apps/web/app/hooks/useQuery.ts b/apps/web/app/hooks/useQuery.ts index 3746dda58..a1517755f 100644 --- a/apps/web/app/hooks/useQuery.ts +++ b/apps/web/app/hooks/useQuery.ts @@ -2,21 +2,28 @@ import { useCallback, useRef, useState } from 'react'; export function useQuery Promise>(queryFunction: T) { const [loading, setLoading] = useState(false); + const loadingRef = useRef(false); const infiniteLoading = useRef(false); const queryCall = useCallback((...params: Parameters) => { setLoading(true); + loadingRef.current = true; const promise = queryFunction(...params); promise.finally(() => { - !infiniteLoading.current && setLoading(false); + if (!infiniteLoading.current) { + setLoading(false); + + loadingRef.current = false; + } }); promise.catch(() => { setLoading(false); + loadingRef.current = false; }); return promise; // eslint-disable-next-line react-hooks/exhaustive-deps }, []) as T; - return { queryCall, loading, infiniteLoading }; + return { queryCall, loading, infiniteLoading, loadingRef }; }