perf: disable database cleanups when page is not active (#1471)

* perf: disable database cleanups when page is not active

* fix test

src/routes/_store/observers/cleanup.js

@@ -1,6 +1,7 @@
 import { store } from '../store'
 import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
 import { CLEANUP_DELAY, CLEANUP_TIME_AGO } from '../../_static/database'
+import { scheduleInterval } from '../../_utils/scheduleInterval'
 
 function doCleanup () {
   // Periodically clean up drafts in localStorage, so they don't grow without bound.
@@ -26,6 +27,10 @@ function doCleanup () {
   }
 }
 
-export function cleanup () {
+function doCleanupLazily () {
-  setInterval(() => scheduleIdleTask(doCleanup), CLEANUP_DELAY)
+  scheduleIdleTask(doCleanup)
+}
+
+export function cleanup () {
+  scheduleInterval(doCleanupLazily, CLEANUP_DELAY, /* runOnActive */ false)
 }

src/routes/_store/observers/nowObservers.js

@@ -1,47 +1,20 @@
 // For convenience, periodically re-compute the current time. This ensures freshness of
 // displays like "x minutes ago" without having to jump through a lot of hoops.
 import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { scheduleInterval } from '../../_utils/scheduleInterval'
 
 const POLL_INTERVAL = 10000
 
 export function nowObservers (store) {
-  let interval
-
   function updateNow () {
     store.set({ now: Date.now() })
   }
 
-  function startPolling () {
+  function updateNowLazily () {
-    interval = setInterval(() => scheduleIdleTask(updateNow), POLL_INTERVAL)
-  }
-
-  function stopPolling () {
-    if (interval) {
-      clearInterval(interval)
-      interval = null
-    }
-  }
-
-  function restartPolling () {
-    stopPolling()
     scheduleIdleTask(updateNow)
-    startPolling()
   }
 
   updateNow()
 
-  if (process.browser) {
+  scheduleInterval(updateNowLazily, POLL_INTERVAL, /* runOnActive */ true)
-    startPolling()
-
-    lifecycle.addEventListener('statechange', e => {
-      if (e.newState === 'passive') {
-        console.log('stopping Date.now() observer...')
-        stopPolling()
-      } else if (e.newState === 'active') {
-        console.log('restarting Date.now() observer...')
-        restartPolling()
-      }
-    })
-  }
 }

src/routes/_utils/scheduleInterval.js

@@ -0,0 +1,48 @@
+import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+
+/**
+ * Schedule a callback, similar to setInterval but disables itself when the page is not active to save battery/CPU.
+ * @param callback - callback to run
+ * @param delay - how many milliseconds between callback calls
+ * @param runOnActive - whether to run immediately when the page switches to an "active" state
+ */
+export function scheduleInterval (callback, delay, runOnActive) {
+  let interval
+
+  function startPolling () {
+    interval = setInterval(callback, delay)
+  }
+
+  function stopPolling () {
+    if (interval) {
+      clearInterval(interval)
+      interval = null
+    }
+  }
+
+  function restartPolling () {
+    stopPolling()
+    if (runOnActive) {
+      try {
+        callback()
+      } catch (e) {
+        console.warn(e)
+      }
+    }
+    startPolling()
+  }
+
+  if (process.browser) {
+    startPolling()
+
+    lifecycle.addEventListener('statechange', e => {
+      if (e.newState === 'passive') {
+        console.log('pausing interval...')
+        stopPolling()
+      } else if (e.newState === 'active') {
+        console.log('restarting interval...')
+        restartPolling()
+      }
+    })
+  }
+}