Added loading spinner to popup menu

adamlui · Dec 4, 2024 · 71723d6 · 71723d6
1 parent 86bdfee
commit 71723d6
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 6 deletions.
diff --git a/chatgpt-auto-continue/chromium/extension/popup/controller.js b/chatgpt-auto-continue/chromium/extension/popup/controller.js
@@ -139,4 +139,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/chatgpt-auto-continue/chromium/extension/popup/index.html b/chatgpt-auto-continue/chromium/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=24 src="https://media.chatgptautocontinue.com/images/icons/continue-symbol/black/icon32.png">

diff --git a/chatgpt-auto-continue/chromium/extension/popup/style.css b/chatgpt-auto-continue/chromium/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 */
@@ -11,6 +11,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 ;

diff --git a/chatgpt-auto-continue/firefox/extension/popup/controller.js b/chatgpt-auto-continue/firefox/extension/popup/controller.js
@@ -139,4 +139,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/chatgpt-auto-continue/firefox/extension/popup/index.html b/chatgpt-auto-continue/firefox/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=24 src="https://media.chatgptautocontinue.com/images/icons/continue-symbol/black/icon32.png">

diff --git a/chatgpt-auto-continue/firefox/extension/popup/style.css b/chatgpt-auto-continue/firefox/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 */
@@ -11,6 +11,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 ;

diff --git a/chatgpt-infinity/chrome/extension/popup/controller.js b/chatgpt-infinity/chrome/extension/popup/controller.js
@@ -204,4 +204,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/chatgpt-infinity/chrome/extension/popup/index.html b/chatgpt-infinity/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://media.chatgptinfinity.com/images/icons/infinity-symbol/black/icon32.png">

diff --git a/chatgpt-infinity/chrome/extension/popup/style.css b/chatgpt-infinity/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 */
@@ -11,6 +11,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 ;

diff --git a/chatgpt-infinity/firefox/extension/popup/controller.js b/chatgpt-infinity/firefox/extension/popup/controller.js
@@ -205,4 +205,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/chatgpt-infinity/firefox/extension/popup/index.html b/chatgpt-infinity/firefox/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://media.chatgptinfinity.com/images/icons/infinity-symbol/black/icon32.png">

diff --git a/chatgpt-infinity/firefox/extension/popup/style.css b/chatgpt-infinity/firefox/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 */
@@ -11,6 +11,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 ;

diff --git a/chatgpt-widescreen/chrome/extension/popup/controller.js b/chatgpt-widescreen/chrome/extension/popup/controller.js
@@ -139,4 +139,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/chatgpt-widescreen/chrome/extension/popup/index.html b/chatgpt-widescreen/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://media.chatgptwidescreen.com/images/icons/widescreen-robot-emoji/icon32.png">

diff --git a/chatgpt-widescreen/chrome/extension/popup/style.css b/chatgpt-widescreen/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 */
@@ -11,6 +11,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 ;

diff --git a/chatgpt-widescreen/firefox/extension/popup/controller.js b/chatgpt-widescreen/firefox/extension/popup/controller.js
@@ -139,4 +139,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/chatgpt-widescreen/firefox/extension/popup/index.html b/chatgpt-widescreen/firefox/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://media.chatgptwidescreen.com/images/icons/widescreen-robot-emoji/icon32.png">

diff --git a/chatgpt-widescreen/firefox/extension/popup/style.css b/chatgpt-widescreen/firefox/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 */
@@ -11,6 +11,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 ;