updates: switch strategies to defer

ui/src/logic/useAppUpdates.ts

@@ -1,4 +1,5 @@
-import { createContext, useCallback } from 'react';
+import useKilnState, { usePike } from '@/state/kiln';
+import { createContext, useCallback, useEffect, useState } from 'react';
 import { useRegisterSW } from 'virtual:pwa-register/react';
 
 const CHECK_FOR_UPDATES_INTERVAL = 10 * 60 * 1000; // 10 minutes
@@ -42,6 +43,30 @@ function useServiceWorker() {
 
 export default function useAppUpdates() {
   const { needRefresh, updateServiceWorker } = useServiceWorker();
+  const pike = usePike('groups');
+
+  const [needsUpdate, setNeedsUpdate] = useState(false);
+  const [initialHash, setInitialHash] = useState<string | null>(null);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      useKilnState.getState().fetchPikes();
+    }, CHECK_FOR_UPDATES_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (pike) {
+      if (!initialHash) {
+        setInitialHash(pike.hash);
+      } else if (initialHash !== pike.hash && !needsUpdate) {
+        // wait 5 minutes before showing the update prompt in case there
+        // are multiple updates in quick succession
+        setTimeout(() => setNeedsUpdate(true), 5 * 60 * 1000);
+      }
+    }
+  }, [pike, initialHash, needsUpdate]);
 
   const triggerUpdate = useCallback(
     async (returnToRoot: boolean) => {