update

static/index.html

@@ -24,6 +24,7 @@
         <div class="output">
           <div id="image-container">
             <img src="images/placeholder.png" id="placeholder" />
+            <img src="images/spinner.svg" id="spinner" style="display: none;" />
           </div>
         </div>
       </div>

static/script.js

@@ -3,6 +3,10 @@ const textGenInput = document.getElementById('text-gen-input');
 const inferenceSteps = document.getElementById('inference_steps');
 const model = document.getElementById('model');
 const textGenSubmit = document.getElementById('text-gen-submit');
+const spinner = document.getElementById('spinner');
+const placeholder = document.getElementById('placeholder');
+
+
 
 [textGenInput, inferenceSteps, model].forEach(item => {
   item.addEventListener('blur', async (event) => {
@@ -29,20 +33,24 @@ textGenForm.addEventListener('submit', async (event) => {
      event.preventDefault();
 
      try {
+      placeholder.remove();
+      document.getElementById('result').remove();
+      spinner.style.display = "block";
+
       const resp = await generateImage(textGenInput.value, inferenceSteps.value, model.value);
       const path = "/" + resp;
       
       var resultsContainer = document.getElementById('image-container');
 
-      const element = document.getElementById("placeholder");
-      element.remove();
 
       var truepicDisplay = document.createElement('truepic-display');
+      truepicDisplay.setAttribute("id", "result");
       var truepic = document.createElement('img');
       truepic.src = path;
 
       truepicDisplay.appendChild(truepic);
 
+      spinner.style.display = "none";  
       resultsContainer.appendChild(truepicDisplay);
     } catch (err) {
       console.error(err);

static/style.css

@@ -65,7 +65,7 @@ select, textarea {
   justify-content: center;
 }
 
-.output #image-container #placeholder {
+.output #image-container #placeholder, .output #image-container #spinner {
   width: 48px;
   height: 48px;
   align-self: center;
@@ -83,4 +83,7 @@ select, textarea {
 
 #text-gen-submit.active {
   background: rgba(26, 109, 255, 1);
-}
+}
+
+
+/* Spinner */