chore: add spinner

gha-common · May 14, 2024 · 59ec6a3 · 59ec6a3
1 parent 9be942e
commit 59ec6a3
Showing 1 changed file with 78 additions and 0 deletions.
diff --git a/index.html b/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>