Update templates/create_db.html

templates/create_db.html

@@ -61,6 +61,10 @@
     .btn-primary {
         background-color: #4c4cff;
         border-color: #4c4cff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
     }
 
     .btn-primary:hover {
@@ -68,33 +72,20 @@
         border-color: #3838e8;
     }
 
-    /* Custom scrollbar */
-    .card::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    .card::-webkit-scrollbar-thumb {
-        background-color: #444;
-        border-radius: 4px;
-    }
-
-    /* Loader styling */
-    #loader {
+    /* Loader on the button */
+    .button-spinner {
         display: none; /* Hidden by default */
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 9999;
-    }
-
-    .spinner {
-        width: 50px;
-        height: 50px;
-        border: 5px solid #f3f3f3;
-        border-top: 5px solid #3498db;
+        width: 20px;
+        height: 20px;
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #ffffff;
         border-radius: 50%;
         animation: spin 1s linear infinite;
+        margin-left: 10px; /* Space between button text and loader */
+    }
+
+    .btn-loading .button-spinner {
+        display: inline-block; /* Show spinner when loading */
     }
 
     @keyframes spin {
@@ -106,24 +97,11 @@
         }
     }
 
-    .loading-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(255, 255, 255, 0.8);
-        z-index: 9998;
-        display: none; /* Hidden by default */
+    .btn-loading .btn-text {
+        opacity: 0.5; /* Dim button text when loading */
     }
 </style>
 
-<!-- Loader HTML -->
-<div id="loader" class="loading-overlay">
-    <div class="spinner"></div>
-</div>
-
-<!-- Main Content -->
 <div class="container mt-5">
     <div class="card shadow">
         <div class="card-header">
@@ -146,7 +124,10 @@
             
                 <!-- Submit Button -->
                 <div class="mt-4 text-center">
-                    <button type="submit" class="btn btn-primary px-5">Create</button>
+                    <button type="submit" class="btn btn-primary px-5">
+                        <span class="btn-text">Create</span>
+                        <div class="button-spinner"></div>
+                    </button>
                 </div>
             </form>
         </div>
@@ -154,12 +135,13 @@
 </div>
 
 <script>
-    // Show loader on form submission
+    // Show loader on button click
     const form = document.getElementById('db-form');
-    const loader = document.getElementById('loader');
+    const submitButton = document.querySelector('.btn-primary');
 
     form.addEventListener('submit', function (event) {
-        loader.style.display = 'flex'; // Show loader
+        submitButton.classList.add('btn-loading'); // Add loading class
+        submitButton.disabled = true; // Disable button to prevent multiple clicks
     });
 </script>