Merge pull request #136 from zugdev/fix-rerender

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

@@ -46,11 +46,19 @@ 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,
+  options = { ordering: "normal" },
+  skipAnimation = false,
+}: {
+  sorting?: Sorting;
+  options?: { ordering: string };
+  skipAnimation?: boolean;
+} = {}) {
   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.length === 0) {
+        void displayGitHubIssues(); // if it's first time loading keep animation
+      } else {
+        void displayGitHubIssues({ skipAnimation: true }); // if there were cached issues skip 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;
+        }
       }
     }
   }

src/home/sorting/sorting-manager.ts

@@ -163,7 +163,7 @@ export class SortingManager {
 
       // Apply the sorting based on the new state (normal or reverse)
       try {
-        void displayGitHubIssues(option as Sorting, { ordering: newOrdering });
+        void displayGitHubIssues({ sorting: option as Sorting, options: { ordering: newOrdering } });
       } catch (error) {
         renderErrorCatch(error as ErrorEvent);
       }

static/progressive-web-app.js

@@ -1,4 +1,4 @@
-const cacheName = "pwacache-v2"; // Increment this when files change
+const cacheName = "pwacache-v4"; // Increment this when files change
 const urlsToCache = [
   "/",
   "/index.html",
@@ -43,10 +43,15 @@ self.addEventListener("activate", (event) => {
   self.clients.claim(); // Take control of all pages immediately
 });
 
-// Fetch event: Respond from cache or network
+// Fetch event: Cache first approach but update cache anyways
 self.addEventListener("fetch", (event) => {
   const url = new URL(event.request.url);
 
+  // Ignore non-HTTP(S) requests (like 'chrome-extension://')
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    return;
+  }
+
   // If the request has query parameters, bypass the cache
   if (url.search) { 
     event.respondWith(fetch(event.request));
@@ -55,17 +60,29 @@ self.addEventListener("fetch", (event) => {
 
   event.respondWith(
     caches.match(event.request).then((cachedResponse) => {
-      if (cachedResponse) {
-        return cachedResponse;
-      }
-      return fetch(event.request)
+      const fetchPromise = fetch(event.request)
         .then((networkResponse) => {
+          // Clone the network response to avoid using the body twice
+          const responseClone = networkResponse.clone();
+
+          // If the network response is valid, update the cache
+          if (networkResponse.ok) {
+            caches.open(cacheName).then((cache) =>
+              cache.put(event.request, responseClone)
+            );
+          }
           return networkResponse;
         })
         .catch((error) => {
           console.error("[Service Worker] Network request failed:", error);
-          return null;
+          return cachedResponse || new Response("Offline content unavailable", {
+            status: 503,
+            statusText: "Service Unavailable",
+          });
         });
+
+      // Serve from cache first, but update the cache in the background
+      return cachedResponse || fetchPromise;
     })
   );
-});
+});