updates

static/index.html

@@ -78,11 +78,11 @@
             <div class="display-generate">
               <div class="image-container">
                 <img src="images/placeholder.png" class="placeholder" />
-                <img
-                  src="images/spinner.svg"
-                  class="spinner"
-                  style="display: none"
-                />
+                <div class="spinner" style="display: none">
+                  <img src="images/spinner.svg" />
+                  <h3 class="mt-3">Generating image...</h3>
+                  <p class="small">In some cases, this may take 1-2 minutes.</p>
+                </div>
               </div>
 
               <div class="alert alert-secondary action-menu" role="alert">
@@ -145,11 +145,11 @@
               </div>
               <div class="image-container">
                 <img src="images/placeholder.png" class="placeholder" />
-                <img
-                  src="images/spinner.svg"
-                  class="spinner"
-                  style="display: none"
-                />
+                <div class="spinner" style="display: none">
+                  <img src="images/spinner.svg" />
+                  <h3 class="mt-3">Verifying image...</h3>
+                  <p class="small">In some cases, this may take 1-2 minutes.</p>
+                </div>
               </div>
               <div class="output-container mt-5" style="display: none">
                 <h3 class="mt-4 mb-4">Verification output</h3>
@@ -294,7 +294,9 @@
                   Submit
                 </button>
 
-                <div class="error mt-3">Something went wrong. Please try again.</div>
+                <div class="error mt-3">
+                  Something went wrong. Please try again.
+                </div>
               </form>
 
               <div class="how-it-works">
@@ -353,7 +355,9 @@
                   Submit
                 </button>
 
-                <div class="error mt-3">Something went wrong. Please try again.</div>
+                <div class="error mt-3">
+                  Something went wrong. Please try again.
+                </div>
               </form>
               <div class="how-it-works">
                 <p><strong>How it works</strong></p>
@@ -485,8 +489,7 @@
     });
 
     function submitForm() {
-      if (!fileUpload.value || !verifyTerms.checked)
-        return
+      if (!fileUpload.value || !verifyTerms.checked) return;
 
       const file = document.getElementById("fileUpload").files[0];
 
@@ -498,11 +501,11 @@
           .setAttribute("src", fileReader.result);
       };
 
-      document.querySelector('.display-verify .error').style.display = "none";
+      document.querySelector(".display-verify .error").style.display = "none";
       placeholder = document.querySelector(".display-verify .placeholder");
       spinner = document.querySelector(".display-verify .spinner");
       placeholder.style.display = "none";
-      
+
       if (document.getElementById("verifyresult"))
         document.getElementById("verifyresult").remove(); // JCL make sure to remove the correct one
       spinner.style.display = "block";
@@ -605,15 +608,16 @@
         })
         .catch((error) => {
           console.log(error);
-          document.querySelector('.display-verify .error').style.display = "block";
+          document.querySelector(".display-verify .error").style.display =
+            "block";
 
           fileUpload.value = "";
           setVerifyButtonStatus();
 
           document.querySelector(".display-verify .spinner").style.display =
             "none";
-            document.querySelector(".display-verify .placeholder").style.display =
-            "block";  
+          document.querySelector(".display-verify .placeholder").style.display =
+            "block";
           // Handle errors
         });
     }
@@ -635,7 +639,7 @@
       placeholder = document.querySelector(".display-generate .placeholder");
       spinner = document.querySelector(".display-generate .spinner");
       generateActionMenu.style.display = "none";
-      document.querySelector('.display-generate .error').style.display = "none";
+      document.querySelector(".display-generate .error").style.display = "none";
 
       // parameters.style.display = "none";
 
@@ -675,10 +679,10 @@
     */
       } catch (err) {
         console.error(err);
-        document.querySelector('.display-generate .error').style.display = "block";
+        document.querySelector(".display-generate .error").style.display =
+          "block";
         spinner.style.display = "none";
         placeholder.style.display = "block";
-
       }
     });
 

static/style.css

@@ -95,12 +95,21 @@ textarea {
 }
 
 .image-container .placeholder,
-.image-container .spinner {
+.image-container .spinner img {
   width: 48px;
   height: 48px;
+}
+
+.image-container .placeholder,
+.image-container .spinner {
   align-self: center;
 }
 
+.image-container .spinner {
+  text-align: center;
+  color: #56687a;
+}
+
 #body .container > .row > .col:first-child {
   border-right: 1px solid rgba(227, 234, 240, 1);
 }