feat: add loader with spinner on index.html to handle delay

closes #7
gha-common · May 14, 2024 · 23ea2f4 · 23ea2f4
1 parent f1623dd
commit 23ea2f4
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 1 deletion.
diff --git a/assets/index.html b/assets/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Waiting for GitHub Pages Deployment</title>
+    <style>
+      @import url('nord.css');
+      body {
+        height: 100vh;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+      }
+      #spinner {
+        display: none;
+        border: 4px solid var(--nord1);
+        border-top: 4px solid var(--nord3);
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        animation: spin 2s linear infinite;
+      }
+      p {
+        font-size: 12px;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
+    <script>
+      function getHashFromQueryString() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get("hash");
+      }
+
+      async function checkFileExists(url) {
+        try {
+          const response = await fetch(url, { method: "HEAD" });
+          return response.ok;
+        } catch (error) {
+          return false;
+        }
+      }
+
+      async function waitForFileToExist(url, interval = 2000) {
+        while (true) {
+          if (await checkFileExists(url)) {
+            return true;
+          }
+          await new Promise((resolve) => setTimeout(resolve, interval));
+        }
+      }
+
+      async function loadContent() {
+        const spinner = document.getElementById("spinner");
+        const hash = getHashFromQueryString();
+        const fileUrl = `${hash}.html`;
+
+        spinner.style.display = "block";
+
+        await waitForFileToExist(fileUrl);
+
+        window.location.href = fileUrl;
+      }
+
+      document.addEventListener("DOMContentLoaded", loadContent);
+
+    </script>
+  </head>
+  <body>
+    <div id="spinner"></div>
+    <p>Waiting for GitHub Pages Deployment</p>
+  </body>
+</html>
diff --git a/src/update-comment.js b/src/update-comment.js
@@ -14,7 +14,7 @@ const updateCodeCoverageComment = module.exports = async ({ context, github }, r
 
   const commentBody = [
     '<!-- coverage -->',
-    `### [Code Coverage Report 🔗](https://${context.repo.owner}.github.io/${context.repo.repo}/${revision}.html#file0) for ${revision}`,
+    `### [Code Coverage Report 🔗](https://${context.repo.owner}.github.io/${context.repo.repo}/?hash=${revision}) for ${revision}`,
   ]
 
   if (fs.existsSync('cover.txt') === true) {