Added loading spinner to popup menu ↞ [auto-sync from https://github.com/KudoAI/chatgpt.js-chrome-starter]

kudo-sync-bot · kudo-sync-bot · commit c4cbdc5da5e1 · 2024-12-04T04:48:55.000-08:00
diff --git a/starters/chrome/extension/popup/controller.js b/starters/chrome/extension/popup/controller.js
@@ -132,4 +132,7 @@
     moreExtensionsSpan.onclick = () => { chrome.tabs.create({ url: app.urls.relatedExtensions }) ; close() }
     moreExtensionsSpan.append(moreExtensionsIcon) ; footer.append(moreExtensionsSpan)
 
+    // Hide loading spinner
+    document.querySelectorAll('[class^="loading"]').forEach(elem => elem.style.display = 'none')
+
 })()
diff --git a/starters/chrome/extension/popup/index.html b/starters/chrome/extension/popup/index.html
@@ -5,6 +5,9 @@
         <meta charset="UTF-8">
     </head>
     <body>
+        <div class="loading-bg">
+            <span class="loading-spinner"></span>
+        </div>
         <div class="menu-header">
             <div class="logo">
                 <img width=26 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png">
diff --git a/starters/chrome/extension/popup/style.css b/starters/chrome/extension/popup/style.css
@@ -1,5 +1,5 @@
 /* General size */
-html { height: fit-content }
+html { height: fit-content ; min-height: 50px }
 body { width: max-content ; margin: 0 ; overflow: clip }
 
 /* General font */
@@ -10,6 +10,15 @@ body, button, input, select, textarea {
 a { color: #999 ; text-decoration: none }
 a:focus, a:hover { text-decoration: underline ; color: inherit }
 
+/* Loading elems */
+.loading-bg { background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111; }
+.loading-spinner {
+    border: 8px solid #f3f3f3 ; border-top: 8px solid #3498db ; border-radius: 50% ;
+    width: 15vh ; height: 15vh ; animation: spin 1s linear infinite ;
+    position: absolute ; top: calc(50% - 7.5vh - 8px) ; left: calc(50% - 7.5vh)
+}
+@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}
+
 /* Header */
 .menu-header {
     border-bottom: solid 1px lightgrey ; padding: 5px 5px 5px 0; margin: 0 ;
