Merge pull request #41 from baloise/main

add loading spinner

Author: robbizbal

src/static/scripts/mask.js

@@ -69,6 +69,8 @@ document.getElementById('btnLLMReset').addEventListener('click', function() {
 document.getElementById('inputForm').addEventListener('submit', function(event) {
     event.preventDefault(); // Prevent the default form submission
 
+    document.getElementById('loading-spinner').style.display = 'flex';
+
     const inputData = document.getElementById('inputData').value;
     const backendType = document.getElementById('backendType').value;
     const inputLLMurl = document.getElementById('inputLLMurl').value;
@@ -94,8 +96,10 @@ document.getElementById('inputForm').addEventListener('submit', function(event)
     .then(text => {
         // Display the response in the textarea
         document.getElementById('responseFieldText').value = JSON.stringify(text.original_text, null, 2); // Format the JSON response
-        document.getElementById('responseFieldEntities').value = JSON.stringify(text.entities, null, 2); // Format the JSON response
-        document.getElementById('responseFieldAnonText').value = JSON.stringify(text.anonymized_text, null, 2); // Format the string response
+        document.getElementById('responseFieldEntities').value = JSON.stringify(text.entities, null, 2);
+        document.getElementById('responseFieldAnonText').value = JSON.stringify(text.anonymized_text, null, 2);
+
+        document.getElementById('loading-spinner').style.display = 'none';
     })
     .catch((error) => {
         console.error('Error:', error); // Handle any errors

src/static/styles/style.css

@@ -107,4 +107,19 @@ footer {
 .url-nounderline {
     text-decoration: none;
     color: var(--link-color);
+}
+
+#loading-spinner {
+    display: none; /* Initially hidden */
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #000000;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }

src/templates/html/mask.html

@@ -25,6 +25,9 @@ <h1>YoYo MaskЯ</h1>
             <div class="flex-item">
                 <h3>Input</h3>
             </div>
+            <div class="flex-item">
+                <div id="loading-spinner"></div>
+            </div>
             <div class="flex-item">
                 <form id="inputForm">
                     <textarea class="default-textarea" type="text" id="inputData" placeholder="Enter text to anonymize or load text from a file" required></textarea>