Change the update check logic on Notifications page

src/pages/notifications.jsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 
 import AccountBlock from '../components/account-block';
 import FollowRequestButtons from '../components/follow-request-buttons';
@@ -23,6 +24,7 @@ import { getRegistration } from '../utils/push-notifications';
 import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
 import { getCurrentInstance } from '../utils/store-utils';
+import usePageVisibility from '../utils/usePageVisibility';
 import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';
 
@@ -173,30 +175,53 @@ function Notifications({ columnMode }) {
   //   }
   // }, [nearReachEnd, showMore]);
 
-  const loadUpdates = useCallback(() => {
+  const loadUpdates = useCallback(
-    console.log('✨ Load updates', {
+    ({ disableIdleCheck = false } = {}) => {
-      autoRefresh: snapStates.settings.autoRefresh,
+      console.log('✨ Load updates', {
-      scrollTop: scrollableRef.current?.scrollTop === 0,
+        autoRefresh: snapStates.settings.autoRefresh,
-      inBackground: inBackground(),
+        scrollTop: scrollableRef.current?.scrollTop === 0,
-      notificationsShowNew: snapStates.notificationsShowNew,
+        inBackground: inBackground(),
-      uiState,
+        disableIdleCheck,
-    });
+        notificationsShowNew: snapStates.notificationsShowNew,
-    if (
+        uiState,
-      snapStates.settings.autoRefresh &&
+      });
-      scrollableRef.current?.scrollTop === 0 &&
+      if (
-      window.__IDLE__ &&
+        snapStates.settings.autoRefresh &&
-      !inBackground() &&
+        scrollableRef.current?.scrollTop === 0 &&
-      snapStates.notificationsShowNew &&
+        (disableIdleCheck || window.__IDLE__) &&
-      uiState !== 'loading'
+        !inBackground() &&
-    ) {
+        snapStates.notificationsShowNew &&
-      loadNotifications(true);
+        uiState !== 'loading'
+      ) {
+        loadNotifications(true);
+      }
+    },
+    [snapStates.notificationsShowNew, snapStates.settings.autoRefresh, uiState],
+  );
+  // useEffect(loadUpdates, [snapStates.notificationsShowNew]);
+
+  const lastHiddenTime = useRef();
+  usePageVisibility((visible) => {
+    let unsub;
+    if (visible) {
+      const timeDiff = Date.now() - lastHiddenTime.current;
+      if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
+        loadUpdates({
+          disableIdleCheck: true,
+        });
+      } else {
+        lastHiddenTime.current = Date.now();
+      }
+      unsub = subscribeKey(states, 'notificationsShowNew', (v) => {
+        if (v) {
+          loadUpdates();
+        }
+      });
     }
-  }, [
+    return () => {
-    snapStates.notificationsShowNew,
+      unsub?.();
-    snapStates.settings.autoRefresh,
+    };
-    uiState,
+  });
-  ]);
-  useEffect(loadUpdates, [snapStates.notificationsShowNew]);
 
   const todayDate = new Date();
   const yesterdayDate = new Date(todayDate - 24 * 60 * 60 * 1000);