Improve ui polling code to prevent poll buildup

ui/src/components/GPUMonitor.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import { GPUApiResponse } from '@/types';
 import Loading from '@/components/Loading';
 import GPUWidget from '@/components/GPUWidget';
 import { apiClient } from '@/utils/api';
+import usePollLoop from '@/hooks/usePollLoop';
 
 const GpuMonitor: React.FC = () => {
   const [gpuData, setGpuData] = useState<GPUApiResponse | null>(null);
@@ -11,39 +12,32 @@ const GpuMonitor: React.FC = () => {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const isFetchingGpuRef = useRef(false);
 
-  useEffect(() => {
-    const fetchGpuInfo = async () => {
-      if (isFetchingGpuRef.current) {
-        return;
-      }
-      setLoading(true);
-      isFetchingGpuRef.current = true;
-      apiClient
-        .get('/api/gpu')
-        .then(res => res.data)
-        .then(data => {
-          setGpuData(data);
-          setLastUpdated(new Date());
-          setError(null);
-        })
-        .catch(err => {
-          setError(`Failed to fetch GPU data: ${err instanceof Error ? err.message : String(err)}`);
-        })
-        .finally(() => {
-          isFetchingGpuRef.current = false;
-          setLoading(false);
-        });
-    };
+  const fetchGpuInfo = () => {
+    if (isFetchingGpuRef.current) {
+      return;
+    }
+    setLoading(true);
+    isFetchingGpuRef.current = true;
+    return apiClient
+      .get('/api/gpu')
+      .then(res => res.data)
+      .then(data => {
+        setGpuData(data);
+        setLastUpdated(new Date());
+        setError(null);
+      })
+      .catch(err => {
+        setError(`Failed to fetch GPU data: ${err instanceof Error ? err.message : String(err)}`);
+      })
+      .finally(() => {
+        isFetchingGpuRef.current = false;
+        setLoading(false);
+      });
+  };
 
-    // Fetch immediately on component mount
-    fetchGpuInfo();
-
-    // Set up interval to fetch every 1 seconds
-    const intervalId = setInterval(fetchGpuInfo, 1000);
-
-    // Clean up interval on component unmount
-    return () => clearInterval(intervalId);
-  }, []);
+  // Fetch every second, but only schedule the next fetch after the current
+  // one finishes so slow responses can't stack requests
+  usePollLoop(fetchGpuInfo, 1000);
 
   const getGridClasses = (gpuCount: number): string => {
     switch (gpuCount) {

ui/src/components/OstrisCloudBalance.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Wallet } from 'lucide-react';
 import { apiClient } from '@/utils/api';
+import usePollLoop from '@/hooks/usePollLoop';
 
 interface BalanceResponse {
   enabled: boolean;
@@ -17,26 +18,14 @@ interface BalanceResponse {
 export default function OstrisCloudBalance() {
   const [data, setData] = useState<BalanceResponse | null>(null);
 
-  useEffect(() => {
-    let cancelled = false;
-
-    const fetchBalance = async () => {
-      try {
-        const res = await apiClient.get<BalanceResponse>('/api/ostris_cloud');
-        if (!cancelled) setData(res.data);
-      } catch {
-        // ignore — keep last known value
-      }
-    };
-
-    fetchBalance();
-    const interval = setInterval(fetchBalance, 60_000);
-
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
-  }, []);
+  usePollLoop(async () => {
+    try {
+      const res = await apiClient.get<BalanceResponse>('/api/ostris_cloud');
+      setData(res.data);
+    } catch {
+      // ignore — keep last known value
+    }
+  }, 60_000);
 
   if (!data || !data.enabled || !data.appUrl) return null;