Experiment making idle detection global

Hooks are nice but it makes component re-render unnecessarily

Also, idle detection doesn't need to be per-component.

src/app.jsx

@@ -1,5 +1,6 @@
 import './app.css';
 
+import debounce from 'just-debounce-it';
 import {
   useEffect,
   useLayoutEffect,
@@ -68,6 +69,45 @@ setTimeout(() => {
   }
 }, 5000);
 
+(() => {
+  window.__IDLE__ = false;
+  const nonIdleEvents = [
+    'mousemove',
+    'mousedown',
+    'resize',
+    'keydown',
+    'touchstart',
+    'pointerdown',
+    'pointermove',
+    'wheel',
+  ];
+  const IDLE_TIME = 5_000; // 5 seconds
+  const setIdle = debounce(() => {
+    window.__IDLE__ = true;
+  }, IDLE_TIME);
+  const onNonIdle = () => {
+    window.__IDLE__ = false;
+    setIdle();
+  };
+  nonIdleEvents.forEach((event) => {
+    window.addEventListener(event, onNonIdle, {
+      passive: true,
+      capture: true,
+    });
+  });
+  // document.addEventListener(
+  //   'visibilitychange',
+  //   () => {
+  //     if (document.visibilityState === 'visible') {
+  //       onNonIdle();
+  //     }
+  //   },
+  //   {
+  //     passive: true,
+  //   },
+  // );
+})();
+
 function App() {
   const snapStates = useSnapshot(states);
   const [isLoggedIn, setIsLoggedIn] = useState(false);

src/components/timeline.jsx

@@ -1,4 +1,3 @@
-import { useIdle } from '@uidotdev/usehooks';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
@@ -211,21 +210,19 @@ function Timeline({
     }
   }, [nearReachEnd, showMore]);
 
-  const idle = useIdle(5000);
-  console.debug('🧘‍♀️ IDLE', idle);
   const loadOrCheckUpdates = useCallback(
-    async ({ disableHoverCheck = false } = {}) => {
+    async ({ disableIdleCheck = false } = {}) => {
       console.log('✨ Load or check updates', {
         autoRefresh: snapStates.settings.autoRefresh,
         scrollTop: scrollableRef.current.scrollTop,
-        disableHoverCheck,
-        idle,
+        disableIdleCheck,
+        idle: window.__IDLE__,
         inBackground: inBackground(),
       });
       if (
         snapStates.settings.autoRefresh &&
         scrollableRef.current.scrollTop === 0 &&
-        (disableHoverCheck || idle) &&
+        (disableIdleCheck || window.__IDLE__) &&
         !inBackground()
       ) {
         console.log('✨ Load updates', snapStates.settings.autoRefresh);
@@ -239,7 +236,7 @@ function Timeline({
         }
       }
     },
-    [id, idle, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
+    [id, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
   );
 
   const lastHiddenTime = useRef();
@@ -249,7 +246,7 @@ function Timeline({
         const timeDiff = Date.now() - lastHiddenTime.current;
         if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
           loadOrCheckUpdates({
-            disableHoverCheck: true,
+            disableIdleCheck: true,
           });
         }
       } else {

src/pages/notifications.jsx

@@ -1,6 +1,5 @@
 import './notifications.css';
 
-import { useIdle } from '@uidotdev/usehooks';
 import { memo } from 'preact/compat';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
@@ -172,8 +171,6 @@ function Notifications({ columnMode }) {
     }
   }, [nearReachEnd, showMore]);
 
-  const idle = useIdle(5000);
-  console.debug('🧘‍♀️ IDLE', idle);
   const loadUpdates = useCallback(() => {
     console.log('✨ Load updates', {
       autoRefresh: snapStates.settings.autoRefresh,
@@ -185,7 +182,7 @@ function Notifications({ columnMode }) {
     if (
       snapStates.settings.autoRefresh &&
       scrollableRef.current?.scrollTop === 0 &&
-      idle &&
+      window.__IDLE__ &&
       !inBackground() &&
       snapStates.notificationsShowNew &&
       uiState !== 'loading'
@@ -193,7 +190,6 @@ function Notifications({ columnMode }) {
       loadNotifications(true);
     }
   }, [
-    idle,
     snapStates.notificationsShowNew,
     snapStates.settings.autoRefresh,
     uiState,