Refactor background check logic to compute time remaining on demand

Author: wickenico

frontend/src/App.tsx

@@ -153,10 +153,8 @@ const WailBrewApp = () => {
 
     // Background update checking state
     const [isBackgroundCheckRunning, setIsBackgroundCheckRunning] = useState<boolean>(false);
-    const [timeUntilNextCheck, setTimeUntilNextCheck] = useState<number>(0);
     const lastKnownOutdatedCount = useRef<number>(0);
     const backgroundCheckInterval = useRef<ReturnType<typeof setInterval> | null>(null);
-    const timeUpdateInterval = useRef<ReturnType<typeof setInterval> | null>(null);
     const nextCheckTime = useRef<number>(Date.now() + 15 * 60 * 1000); // 15 minutes from now
 
     // Track update event listeners for cleanup (prevents duplicate listeners bug)
@@ -392,9 +390,6 @@ const WailBrewApp = () => {
             if (backgroundCheckInterval.current) {
                 clearInterval(backgroundCheckInterval.current);
             }
-            if (timeUpdateInterval.current) {
-                clearInterval(timeUpdateInterval.current);
-            }
             if (loadingTimerInterval.current) {
                 clearInterval(loadingTimerInterval.current);
             }
@@ -558,13 +553,6 @@ const WailBrewApp = () => {
 
     // Start background update checking
     const startBackgroundUpdateCheck = () => {
-        // Update time until next check every second
-        timeUpdateInterval.current = setInterval(() => {
-            const now = Date.now();
-            const timeRemaining = Math.max(0, nextCheckTime.current - now);
-            setTimeUntilNextCheck(Math.floor(timeRemaining / 1000)); // Convert to seconds
-        }, 1000);
-
         // Perform initial check after a short delay
         setTimeout(() => {
             performBackgroundUpdateCheck();
@@ -576,17 +564,10 @@ const WailBrewApp = () => {
         }, 15 * 60 * 1000); // 15 minutes
     };
 
-    // Format time until next check
-    const formatTimeUntilNextCheck = (seconds: number): string => {
-        if (seconds <= 0) return t('backgroundCheck.checkingNow');
-
-        const minutes = Math.floor(seconds / 60);
-        const remainingSeconds = seconds % 60;
-
-        if (minutes > 0) {
-            return t('backgroundCheck.nextCheckIn', { minutes, seconds: remainingSeconds });
-        }
-        return t('backgroundCheck.nextCheckInSeconds', { seconds: remainingSeconds });
+    // Get seconds until next background check (computed on demand, no re-renders)
+    const getSecondsUntilNextCheck = (): number => {
+        const timeRemaining = Math.max(0, nextCheckTime.current - Date.now());
+        return Math.floor(timeRemaining / 1000);
     };
 
     const checkAppUpdatesOnStartup = async () => {
@@ -2016,8 +1997,7 @@ const WailBrewApp = () => {
                 sidebarWidth={sidebarWidth}
                 sidebarRef={sidebarRef}
                 isBackgroundCheckRunning={isBackgroundCheckRunning}
-                timeUntilNextCheck={timeUntilNextCheck}
-                formatTimeUntilNextCheck={formatTimeUntilNextCheck}
+                getSecondsUntilNextCheck={getSecondsUntilNextCheck}
             />
             <div
                 className="sidebar-resize-handle"

frontend/src/components/Sidebar.tsx

@@ -21,8 +21,7 @@ interface SidebarProps {
     sidebarWidth?: number;
     sidebarRef?: React.RefObject<HTMLElement | null>;
     isBackgroundCheckRunning?: boolean;
-    timeUntilNextCheck?: number;
-    formatTimeUntilNextCheck?: (seconds: number) => string;
+    getSecondsUntilNextCheck?: () => number;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -39,24 +38,50 @@ const Sidebar: React.FC<SidebarProps> = ({
     sidebarWidth,
     sidebarRef,
     isBackgroundCheckRunning = false,
-    timeUntilNextCheck = 0,
-    formatTimeUntilNextCheck,
+    getSecondsUntilNextCheck,
 }) => {
     const { t, i18n } = useTranslation();
     const currentLanguage = mapToSupportedLanguage(i18n.resolvedLanguage ?? i18n.language);
     const [showTooltip, setShowTooltip] = useState(false);
     const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+    const [tooltipText, setTooltipText] = useState("");
     const iconRef = useRef<HTMLDivElement>(null);
 
-    // Update tooltip position when showing
+    // Format seconds into a readable countdown string
+    const formatCountdown = (seconds: number): string => {
+        if (seconds <= 0) return t('backgroundCheck.checkingNow');
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        if (minutes > 0) {
+            return t('backgroundCheck.nextCheckIn', { minutes, seconds: remainingSeconds });
+        }
+        return t('backgroundCheck.nextCheckInSeconds', { seconds: remainingSeconds });
+    };
+
+    // Update tooltip position and start countdown only while tooltip is visible
     useEffect(() => {
         if (showTooltip && iconRef.current) {
             const rect = iconRef.current.getBoundingClientRect();
             setTooltipPosition({
                 top: rect.bottom + 8,
                 left: rect.left + rect.width / 2,
             });
+
+            // Compute initial value immediately
+            if (getSecondsUntilNextCheck) {
+                setTooltipText(formatCountdown(getSecondsUntilNextCheck()));
+            }
+
+            // Update every second only while tooltip is visible
+            const interval = setInterval(() => {
+                if (getSecondsUntilNextCheck) {
+                    setTooltipText(formatCountdown(getSecondsUntilNextCheck()));
+                }
+            }, 1000);
+
+            return () => clearInterval(interval);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [showTooltip]);
 
     // Detect if user is on Mac
@@ -130,7 +155,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                                 }}
                             />
                         )}
-                        {showTooltip && formatTimeUntilNextCheck && ReactDOM.createPortal(
+                        {showTooltip && getSecondsUntilNextCheck && ReactDOM.createPortal(
                                 <div
                                     className="background-check-tooltip"
                                     style={{
@@ -141,7 +166,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                                         zIndex: 99999,
                                     }}
                                 >
-                                    {formatTimeUntilNextCheck(timeUntilNextCheck)}
+                                    {tooltipText}
                                 </div>,
                                 document.body
                             )}