packages/browser-extension/src/popup.html

@@ -121,7 +121,7 @@
           </svg>
         </a>
       </p>
-      <div class="content">
+      <div class="grid">
         <button class="popup-button" disabled id="power-option">
           <svg
             aria-hidden="true"
@@ -329,6 +329,9 @@
           <div class="report-issue-button" data-i18n="contextMenu_issueOption"></div>
         </div>
       </div>
+      <div id="loader">
+        <span></span>
+      </div>
     </main>
     <footer></footer>
   </body>

packages/browser-extension/src/scripts/popup.js

@@ -134,6 +134,9 @@ async function handleContentLoaded() {
     updateBannerUrl.href += `/tag/${latestVersion}`;
   }
 
+  const loader = document.getElementById('loader');
+  loader.style.setProperty('display', 'none');
+
   if (exclusions?.domains.some((x) => url.hostname.match(x.replaceAll(/\*/g, '[^ ]*')))) {
     const supportBanner = document.getElementById('support-banner');
     supportBanner.removeAttribute('aria-hidden');

packages/browser-extension/src/styles/popup.css

@@ -64,7 +64,7 @@ header {
   }
 }
 
-main > .banner {
+.banner {
   font-size: 14px;
   line-height: 18px;
   margin: 0px;
@@ -96,7 +96,7 @@ main > .banner {
   }
 }
 
-main > .content {
+.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
@@ -404,8 +404,36 @@ main > .content {
   }
 }
 
-#refresh-database-check {
-  display: none;
+#loader {
+  align-items: center;
+  background-color: var(--color-white);
+  bottom: 0px;
+  display: flex;
+  justify-content: center;
+  left: 0px;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+
+  & > span {
+    animation: rotation 1s linear infinite;
+    border-bottom-color: var(--color-primary) !important;
+    border-radius: 50%;
+    border: 6px solid var(--color-secondary);
+    box-sizing: border-box;
+    display: inline-block;
+    height: 48px;
+    width: 48px;
+  }
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 #power-option {
@@ -430,3 +458,7 @@ main > .content {
   color: var(--color-warning);
   fill: var(--color-warning);
 }
+
+#refresh-database-check {
+  display: none;
+}