Don't call is_fullscreen so much

src-web/hooks/useIsFullscreen.ts

@@ -1,26 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
-import { useEffect, useState } from 'react';
 import { useWindowSize } from 'react-use';
+import { useDebouncedValue } from './useDebouncedValue';
 
 export function useIsFullscreen() {
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const windowSize = useWindowSize();
+  const debouncedWindowWidth = useDebouncedValue(windowSize.width);
 
-  useEffect(() => {
+  // NOTE: Fullscreen state isn't updated right after resize event on Mac (needs to wait for animation) so
-    (async function () {
+  // we'll wait for a bit using the debounced window size. Hopefully Tauri eventually adds a way to listen
-      // Fullscreen state isn't updated right after resize event on Mac (needs to wait for animation) so
+  // for fullscreen change events.
-      // we'll poll for 10 seconds to see if it changes. Hopefully Tauri eventually adds a way to listen
-      // for this.
-      for (let i = 0; i < 100; i++) {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        const newIsFullscreen = await getCurrent().isFullscreen();
-        if (newIsFullscreen !== isFullscreen) {
-          setIsFullscreen(newIsFullscreen);
-          break;
-        }
-      }
-    })();
-  }, [windowSize, isFullscreen]);
 
-  return isFullscreen;
+  return (
+    useQuery({
+      queryKey: ['is_fullscreen', debouncedWindowWidth],
+      queryFn: async () => {
+        return getCurrent().isFullscreen();
+      },
+    }).data ?? false
+  );
 }