fix: prevent re-render on issue fetching and improve PWA

src/home/fetch-github/fetch-and-display-previews.ts

@@ -46,11 +46,11 @@ function getProposalsOnlyFilter(getProposals: boolean) {
 }
 
 // checks the cache's integrity, sorts issues, checks Directory/Proposals toggle, renders them and applies avatars
-export async function displayGitHubIssues(sorting?: Sorting, options = { ordering: "normal" }) {
+export async function displayGitHubIssues(sorting?: Sorting, options = { ordering: "normal" }, skipAnimation = false) {
   await checkCacheIntegrityAndSyncTasks();
   const cachedTasks = taskManager.getTasks();
   const sortedIssues = sortIssuesController(cachedTasks, sorting, options);
   const sortedAndFiltered = sortedIssues.filter(getProposalsOnlyFilter(isProposalOnlyViewer));
-  renderGitHubIssues(sortedAndFiltered);
+  renderGitHubIssues(sortedAndFiltered, skipAnimation);
   applyAvatarsToIssues();
 }

src/home/fetch-github/fetch-issues-full.ts

@@ -20,9 +20,13 @@ export async function postLoadUpdateIssues() {
     const fetchedIssues = await fetchIssues();
 
     if (issuesAreDifferent(cachedIssues, fetchedIssues)) {
-      await saveIssuesToCache(cachedIssues, fetchedIssues);
+      await saveIssuesToCache(cachedIssues, fetchedIssues); // this handles stale and new issues
       await taskManager.syncTasks();
-      void displayGitHubIssues();
+      if (cachedIssues) {
+        void displayGitHubIssues(undefined, undefined, true); // if there were cached issues skip animation
+      } else {
+        void displayGitHubIssues(); // if it's first time loading keep animation
+      }
     }
   } catch (error) {
     console.error("Error updating issues cache", error);

src/home/rendering/render-github-issues.ts

@@ -7,7 +7,7 @@ import { closeModal, modal, modalBodyInner, titleAnchor, titleHeader } from "./r
 import { setupKeyboardNavigation } from "./setup-keyboard-navigation";
 import { isProposalOnlyViewer } from "../fetch-github/fetch-and-display-previews";
 
-export function renderGitHubIssues(tasks: GitHubIssue[]) {
+export function renderGitHubIssues(tasks: GitHubIssue[], skipAnimation: boolean) {
   const container = taskManager.getContainer();
   if (container.classList.contains("ready")) {
     container.classList.remove("ready");
@@ -22,8 +22,12 @@ export function renderGitHubIssues(tasks: GitHubIssue[]) {
     if (!existingIssueIds.has(task.id.toString())) {
       const issueWrapper = everyNewIssue({ gitHubIssue: task, container });
       if (issueWrapper) {
-        setTimeout(() => issueWrapper.classList.add("active"), delay);
-        delay += baseDelay;
+        if (skipAnimation) {
+          issueWrapper.classList.add("active");
+        } else {
+          setTimeout(() => issueWrapper.classList.add("active"), delay);
+          delay += baseDelay;
+        }
       }
     }
   }

static/progressive-web-app.js

@@ -1,4 +1,4 @@
-const cacheName = "pwacache-v2"; // Increment this when files change
+const cacheName = "pwacache-v3"; // Increment this when files change
 const urlsToCache = [
   "/",
   "/index.html",
@@ -21,7 +21,6 @@ self.addEventListener("install", (event) => {
       })
       .catch((error) => console.error("[Service Worker] Cache failed:", error))
   );
-  self.skipWaiting(); // activate the new worker immediately
 });
 
 // Activate event (deletes old caches when updated)
@@ -43,29 +42,21 @@ self.addEventListener("activate", (event) => {
   self.clients.claim(); // Take control of all pages immediately
 });
 
-// Fetch event: Respond from cache or network
+// Fetch event (try network first, if offline return from cache)
 self.addEventListener("fetch", (event) => {
-  const url = new URL(event.request.url);
-
-  // If the request has query parameters, bypass the cache
-  if (url.search) { 
-    event.respondWith(fetch(event.request));
-    return;
-  }
-
   event.respondWith(
-    caches.match(event.request).then((cachedResponse) => {
-      if (cachedResponse) {
-        return cachedResponse;
-      }
-      return fetch(event.request)
-        .then((networkResponse) => {
-          return networkResponse;
-        })
-        .catch((error) => {
-          console.error("[Service Worker] Network request failed:", error);
-          return null;
+    fetch(event.request)
+      .then((networkResponse) => {
+        return networkResponse;
+      })
+      .catch(() => {
+        return caches.match(event.request).then((cachedResponse) => {
+          if (cachedResponse) {
+            return cachedResponse;
+          } else {
+            return null;
+          }
         });
-    })
+      })
   );
-});
+});