Rearrange/code this part again

- Streaming wasn't UNSUBscribed due to the forever-stuck loop
- Make streaming start later

src/components/background-service.jsx

@@ -8,6 +8,9 @@ import states, { saveStatus } from '../utils/states';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
+const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
+const POLL_INTERVAL = 1000 * 60; // 1 minute
+
 export default memo(function BackgroundService({ isLoggedIn }) {
   // Notifications service
   // - WebSocket to receive notifications when page is visible
@@ -53,39 +56,44 @@ export default memo(function BackgroundService({ isLoggedIn }) {
         let hasStreaming = false;
         // 2. Start streaming
         if (streaming) {
-          try {
+          pollNotifications = setTimeout(() => {
-            hasStreaming = true;
+            (async () => {
-            sub = streaming.user.notification.subscribe();
+              try {
-            console.log('🎏 Streaming notification', sub);
+                hasStreaming = true;
-            for await (const entry of sub) {
+                sub = streaming.user.notification.subscribe();
-              if (!sub) break;
+                console.log('🎏 Streaming notification', sub);
-              console.log('🔔🔔 Notification entry', entry);
+                for await (const entry of sub) {
-              if (entry.event === 'notification') {
+                  if (!sub) break;
-                console.log('🔔🔔 Notification', entry);
+                  if (!visible) break;
-                saveStatus(entry.payload, instance, {
+                  console.log('🔔🔔 Notification entry', entry);
-                  skipThreading: true,
+                  if (entry.event === 'notification') {
-                });
+                    console.log('🔔🔔 Notification', entry);
+                    saveStatus(entry.payload, instance, {
+                      skipThreading: true,
+                    });
+                  }
+                  states.notificationsShowNew = true;
+                }
+              } catch (e) {
+                hasStreaming = false;
+                console.error(e);
               }
-              states.notificationsShowNew = true;
-            }
-          } catch (e) {
-            hasStreaming = false;
-            console.error(e);
-          }
-        }
 
-        if (!hasStreaming) {
+              if (!hasStreaming) {
-          console.log('🎏 Streaming failed, fallback to polling');
+                console.log('🎏 Streaming failed, fallback to polling');
-          // Fallback to polling every minute
+                pollNotifications = setInterval(() => {
-          pollNotifications = setInterval(() => {
+                  checkLatestNotification(masto, instance, true);
-            checkLatestNotification(masto, instance, true);
+                }, POLL_INTERVAL);
-          }, 1000 * 60);
+              }
+            })();
+          }, STREAMING_TIMEOUT);
         }
       })();
     }
     return () => {
       sub?.unsubscribe?.();
       sub = null;
+      clearTimeout(pollNotifications);
       clearInterval(pollNotifications);
     };
   }, [visible, isLoggedIn]);