Update templates/create_db.html

templates/create_db.html

@@ -57,6 +57,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        position: relative;
     }
 
     .btn-primary:hover {
@@ -101,6 +102,33 @@
         align-items: center;
         height: 100px;
     }
+
+    /* Spinner style */
+    .button-spinner {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border: 4px solid #f5f5f5;
+        border-top: 4px solid #4c4cff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        display: none;
+    }
+
+    /* Animation for the spinner */
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* Hide spinner when not loading */
+    .btn-loading .button-spinner {
+        display: inline-block;
+    }
+
+    .btn-loading .btn-text {
+        display: none;
+    }
 </style>
 
 <div class="container mt-5">
@@ -138,7 +166,7 @@
 
                 <!-- 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-button">
                         <span class="btn-text">Create</span>
                         <div class="button-spinner"></div>
                     </button>
@@ -153,6 +181,8 @@
     const fileLabel = document.getElementById('file-label');
     const folderUpload = document.getElementById('folder-upload');
     const fileUpload = document.getElementById('file-upload');
+    const submitButton = document.getElementById('submit-button');
+    const buttonSpinner = submitButton.querySelector('.button-spinner');
 
     // Toggle upload mode
     folderLabel.addEventListener('click', () => {
@@ -168,6 +198,18 @@
         fileUpload.classList.remove('hidden');
         folderUpload.classList.add('hidden');
     });
+
+    // Handle form submission
+    document.getElementById('db-form').addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent form submission for demonstration
+        submitButton.classList.add('btn-loading');
+        // Simulate loading
+        setTimeout(() => {
+            // After form is "submitted" and loading is complete
+            submitButton.classList.remove('btn-loading');
+            alert("Form submitted successfully!"); // Simulate success
+        }, 2000); // 2 seconds for loading simulation
+    });
 </script>
 
 {% endblock %}