diff --git a/frontend/src/hooks/api/admin/queries.ts b/frontend/src/hooks/api/admin/queries.ts index b9bdf223a..85c6c153e 100644 --- a/frontend/src/hooks/api/admin/queries.ts +++ b/frontend/src/hooks/api/admin/queries.ts @@ -122,7 +122,7 @@ export const useGetServerRootKmsEncryptionDetails = () => { }); }; -export const useGetInvalidatingCacheStatus = () => { +export const useGetInvalidatingCacheStatus = (enabled = true) => { return useQuery({ queryKey: adminQueryKeys.getInvalidateCache(), queryFn: async () => { @@ -131,6 +131,8 @@ export const useGetInvalidatingCacheStatus = () => { ); return data.invalidating; - } + }, + enabled, + refetchInterval: (data) => (data ? 3000 : false) }); }; diff --git a/frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx b/frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx index f46aa4cca..719410b29 100644 --- a/frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx +++ b/frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-return-assign, consistent-return */ import { useEffect, useRef, useState } from "react"; import { faRotate } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -13,16 +12,17 @@ import { CacheType } from "@app/hooks/api/admin/types"; export const CachingPanel = () => { const { mutateAsync: invalidateCache } = useInvalidateCache(); - const { data: isInvalidating, refetch: refetchInvalidatingStatus } = - useGetInvalidatingCacheStatus(); const { membership } = useOrgPermission(); - const ignoreInitial = useRef(true); + const hasShownSuccessRef = useRef(true); const timeoutRef = useRef(null); - const pollingRef = useRef(null); const [type, setType] = useState(null); const [buttonsDisabled, setButtonsDisabled] = useState(false); + const [shouldPoll, setShouldPoll] = useState(false); + + const { data: isInvalidating, refetch: refetchInvalidatingStatus } = + useGetInvalidatingCacheStatus(shouldPoll); const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ "invalidateCache" @@ -34,13 +34,19 @@ export const CachingPanel = () => { }; const success = () => { + if (hasShownSuccessRef.current) return; + hasShownSuccessRef.current = true; + createNotification({ text: "Successfully invalidated cache", type: "success" }); setButtonsDisabled(false); + setShouldPoll(false); }; const handleInvalidateCacheSubmit = async () => { if (!type) return; + hasShownSuccessRef.current = false; + try { await invalidateCache({ type }); createNotification({ text: `Began invalidating ${type} cache`, type: "success" }); @@ -51,41 +57,35 @@ export const CachingPanel = () => { success(); return; } + + setShouldPoll(true); } catch (err) { console.error(err); createNotification({ text: `Failed to invalidate ${type} cache`, type: "error" }); } - - setType(null); }; useEffect(() => { - const timer = setTimeout(() => (ignoreInitial.current = false), 1000); + refetchInvalidatingStatus(); + const timer = setTimeout(() => (hasShownSuccessRef.current = false), 1000); return () => clearTimeout(timer); }, []); useEffect(() => { if (!isInvalidating) return; - clearInterval(pollingRef.current!); clearTimeout(timeoutRef.current!); - - pollingRef.current = setInterval(() => { - refetchInvalidatingStatus().catch((err) => console.error("Polling error:", err)); - }, 3000); - + setShouldPoll(true); disableButtonsTemporarily(); return () => { - clearInterval(pollingRef.current!); clearTimeout(timeoutRef.current!); }; }, [isInvalidating]); useEffect(() => { - if (!ignoreInitial.current && isInvalidating === false) { + if (!hasShownSuccessRef.current && isInvalidating === false) { success(); - clearInterval(pollingRef.current!); clearTimeout(timeoutRef.current!); } }, [isInvalidating]);