Upload create_db.html

templates/create_db.html

@@ -51,26 +51,6 @@
         box-shadow: 0 0 4px #4c4cff;
     }
 
-    .button-spinner {
-        display: none;
-        border: 2px solid #f5f5f5;
-        border-radius: 50%;
-        border-top: 2px solid #4c4cff;
-        width: 24px;
-        height: 24px;
-        animation: spin 1s linear infinite;
-    }
-    
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-    
-    .btn:active .button-spinner {
-        display: block;
-    }
-
-
     .btn-primary {
         background-color: #4c4cff;
         border-color: #4c4cff;
@@ -126,6 +106,22 @@
         align-items: center;
         height: 100px;
     }
+
+    .spinner {
+        border: 4px solid #f3f3f3; /* Light grey */
+        border-top: 4px solid #4c4cff; /* Blue */
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        animation: spin 1s linear infinite;
+        margin-left: 10px;
+        display: none; /* Initially hidden */
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
 </style>
 
 <div class="container mt-5">
@@ -148,7 +144,7 @@
                 </div>
 
                 <!-- Folder Upload Input -->
-                <div id="folder-upload" class="form-group mt-3 hidden">
+                <div id="folder-upload" class="form-group mt-3">
                     <label for="folder" class="form-label">Upload Folder</label>
                     <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple>
                     <small class="text-muted">Note: You can upload a folder containing multiple files.</small>
@@ -157,15 +153,15 @@
                 <!-- Single File Upload Input -->
                 <div id="file-upload" class="form-group mt-3 hidden">
                     <label for="file" class="form-label">Upload Files</label>
-                    <input type="file" id="file" name="file" class="form-control" multiple >
+                    <input type="file" id="file" name="file" class="form-control" multiple>
                     <small class="text-muted">Note: You can upload one or more files.</small>
                 </div>
 
                 <!-- Submit Button -->
                 <div class="mt-4 text-center d-flex justify-content-center align-items-center">
-                    <button type="submit" class="btn btn-primary px-5">
+                    <button type="submit" class="btn btn-primary px-5" id="submit-btn">
                         <span class="btn-text">Create</span>
-                        <div class="button-spinner"></div>
+                        <div class="spinner" id="spinner"></div>
                     </button>
                 </div>
             </form>
@@ -178,6 +174,8 @@
     const fileLabel = document.getElementById('file-label');
     const folderUpload = document.getElementById('folder-upload');
     const fileUpload = document.getElementById('file-upload');
+    const submitBtn = document.getElementById('submit-btn');
+    const spinner = document.getElementById('spinner');
 
     // Toggle upload mode
     folderLabel.addEventListener('click', () => {
@@ -193,6 +191,13 @@
         fileUpload.classList.remove('hidden');
         folderUpload.classList.add('hidden');
     });
+
+    // Show loader when form is submitted
+    document.getElementById('db-form').addEventListener('submit', function(event) {
+        // Show the spinner and hide the text
+        submitBtn.querySelector('.btn-text').style.display = 'none';
+        spinner.style.display = 'inline-block';
+    });
 </script>
 
 {% endblock %}