Debounce checks, less noisy

src/components/background-service.jsx

@@ -1,5 +1,6 @@
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { api } from '../utils/api';
 import states, { saveStatus } from '../utils/states';
@@ -11,55 +12,62 @@ export default memo(function BackgroundService({ isLoggedIn }) {
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);
   usePageVisibility(setVisible);
-  useEffect(() => {
+  const subRef = useRef();
-    let sub;
+  const debouncedStartNotifications = useDebouncedCallback(() => {
-    if (isLoggedIn && visible) {
+    const { masto, streaming, instance } = api();
-      const { masto, streaming, instance } = api();
+    (async () => {
-      (async () => {
+      // 1. Get the latest notification
-        // 1. Get the latest notification
+      if (states.notificationsLast) {
-        if (states.notificationsLast) {
+        const notificationsIterator = masto.v1.notifications.list({
-          const notificationsIterator = masto.v1.notifications.list({
+          limit: 1,
-            limit: 1,
+          since_id: states.notificationsLast.id,
-            since_id: states.notificationsLast.id,
+        });
-          });
+        const { value: notifications } = await notificationsIterator.next();
-          const { value: notifications } = await notificationsIterator.next();
+        if (notifications?.length) {
-          if (notifications?.length) {
+          let lastReadId;
-            let lastReadId;
+          try {
-            try {
+            const markers = await masto.v1.markers.fetch({
-              const markers = await masto.v1.markers.fetch({
+              timeline: 'notifications',
-                timeline: 'notifications',
+            });
-              });
+            lastReadId = markers?.notifications?.lastReadId;
-              lastReadId = markers?.notifications?.lastReadId;
+          } catch (e) {}
-            } catch (e) {}
+          if (lastReadId) {
-            if (lastReadId) {
+            states.notificationsShowNew = notifications[0].id !== lastReadId;
-              states.notificationsShowNew = notifications[0].id !== lastReadId;
+          } else {
-            } else {
-              states.notificationsShowNew = true;
-            }
-          }
-        }
-
-        // 2. Start streaming
-        if (streaming) {
-          sub = streaming.user.notification.subscribe();
-          console.log('🎏 Streaming notification', sub);
-          for await (const entry of sub) {
-            if (!sub) break;
-            console.log('🔔🔔 Notification entry', entry);
-            if (entry.event === 'notification') {
-              console.log('🔔🔔 Notification', entry);
-              saveStatus(entry.payload, instance, {
-                skipThreading: true,
-              });
-            }
             states.notificationsShowNew = true;
           }
         }
-      })();
+      }
+
+      // 2. Start streaming
+      if (streaming) {
+        let sub = (subRef.current = streaming.user.notification.subscribe());
+        console.log('🎏 Streaming notification', sub);
+        for await (const entry of sub) {
+          if (!sub) break;
+          console.log('🔔🔔 Notification entry', entry);
+          if (entry.event === 'notification') {
+            console.log('🔔🔔 Notification', entry);
+            saveStatus(entry.payload, instance, {
+              skipThreading: true,
+            });
+          }
+          states.notificationsShowNew = true;
+        }
+      }
+    })();
+  }, 3000);
+  useEffect(() => {
+    // let sub;
+    if (isLoggedIn && visible) {
+      debouncedStartNotifications();
     }
     return () => {
-      sub?.unsubscribe?.();
+      // sub?.unsubscribe?.();
-      sub = null;
+      // sub = null;
+      debouncedStartNotifications?.cancel?.();
+      subRef.current?.unsubscribe?.();
+      subRef.current = null;
     };
   }, [visible, isLoggedIn]);
 

src/components/timeline.jsx

@@ -238,6 +238,10 @@ function Timeline({
     },
     [id, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
   );
+  const debouncedLoadOrCheckUpdates = useDebouncedCallback(
+    loadOrCheckUpdates,
+    3000,
+  );
 
   const lastHiddenTime = useRef();
   usePageVisibility(
@@ -245,12 +249,14 @@ function Timeline({
       if (visible) {
         const timeDiff = Date.now() - lastHiddenTime.current;
         if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
-          loadOrCheckUpdates({
+          // 1 minute
+          debouncedLoadOrCheckUpdates({
             disableIdleCheck: true,
           });
         }
       } else {
         lastHiddenTime.current = Date.now();
+        debouncedLoadOrCheckUpdates.cancel();
       }
       setVisible(visible);
     },