src/routes/+page.svelte

@@ -8,34 +8,48 @@ import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 
 export let data: PageData;
 
+const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
 let interval: NodeJS.Timer | null = null;
 let moreOlderPostsAvailable = true;
 let loadingOlderPosts = false;
 
-onMount(async () => {
+function refresh() {
-  interval = setInterval(async () => {
+  const params = new URLSearchParams();
-    const params = new URLSearchParams();
+  if (data.posts.length > 0) {
-    if (data.posts.length > 0) {
+    params.set('since', data.posts[0].created_at);
-      params.set('since', data.posts[0].created_at);
+  }
+  fetch(`/api/posts?${params}`)
+  .then(r => r.json())
+  .then((resp: Post[]) => {
+    if (resp.length > 0) {
+      // Prepend new posts, filter dupes
+      // There shouldn't be any duplicates, but better be safe than sorry
+      const combined = resp.concat(data.posts);
+      const filteredPosts = combined.filter((obj, index, arr) => {
+        return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+      });
+      data.posts = filteredPosts;
     }
-    await fetch(`/api/posts?${params}`)
+  })
-    .then(r => r.json())
+  .catch(e => {
-    .then((resp: Post[]) => {
+    // TODO: Show error in UI
-      if (resp.length > 0) {
+    console.error('Error loading newest posts', e);
-        // Prepend new posts, filter dupes
+  });
-        // There shouldn't be any duplicates, but better be safe than sorry
+}
-        const combined = resp.concat(data.posts);
+
-        const filteredPosts = combined.filter((obj, index, arr) => {
+onMount(async () => {
-          return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+  interval = setInterval(refresh, refreshInterval);
-        });
+
-        data.posts = filteredPosts;
+  // - If the page is hidden, slow down refresh rate
-      }
+  // - If the page is shown, bump up refresh rate
-    })
+  document.addEventListener('visibilitychange', () => {
-    .catch(e => {
+    const delay = document.hidden ? refreshInterval * 10 : refreshInterval;
-      // TODO: Show error in UI
+    if (interval) {
-      console.error('Error loading newest posts', e);
+      clearInterval(interval);
-    });
+    }
-  }, parseInt(PUBLIC_REFRESH_INTERVAL));
+    interval = setInterval(refresh, delay);
+  });
+
   return () => {
     if (interval !== null) {
       clearInterval(interval)