src/routes/+page.svelte

@@ -8,17 +8,17 @@ 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();
   if (data.posts.length > 0) {
     params.set('since', data.posts[0].created_at);
   }
-    await fetch(`/api/posts?${params}`)
+  fetch(`/api/posts?${params}`)
   .then(r => r.json())
   .then((resp: Post[]) => {
     if (resp.length > 0) {
@@ -35,7 +35,21 @@ onMount(async () => {
     // TODO: Show error in UI
     console.error('Error loading newest posts', e);
   });
-  }, parseInt(PUBLIC_REFRESH_INTERVAL));
+}
+
+onMount(async () => {
+  interval = setInterval(refresh, refreshInterval);
+
+  // - If the page is hidden, slow down refresh rate
+  // - If the page is shown, bump up refresh rate
+  document.addEventListener('visibilitychange', () => {
+    const delay = document.hidden ? refreshInterval * 10 : refreshInterval;
+    if (interval) {
+      clearInterval(interval);
+    }
+    interval = setInterval(refresh, delay);
+  });
+
   return () => {
     if (interval !== null) {
       clearInterval(interval)