Update templates/index.html

templates/index.html

@@ -198,32 +198,55 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // Loader functionality
-        document.getElementById('fileUploadForm').onsubmit = function () {
-            document.getElementById('loader').style.display = 'block';
-            document.getElementById('tablinks').disabled = true;
-            document.getElementById('tablinks active').disabled = true;
-        };
-
-        // Flash message auto-hide
-        setTimeout(function () {
-            let flashMessage = document.getElementById("flash-message");
-            if (flashMessage) {
-                flashMessage.style.transition = "opacity 1s ease";
-                flashMessage.style.opacity = 0;
-                setTimeout(() => flashMessage.remove(), 1000);
-            }
-        }, 3000);
-
-        // Function to open links in the same tab
-        function openLink(url) {
-            window.location.href = url; // Redirects to the specified URL in the same tab
-            // Remove "active" class from all buttons
-            const buttons = document.querySelectorAll('.tab button');
-            buttons.forEach(button => button.classList.remove('active'));
-            // Add "active" class to the clicked button
-            element.classList.add('active');
-        }
+      // Loader functionality
+      document.getElementById('fileUploadForm').onsubmit = function() {
+        document.getElementById('loader').style.display = 'block';
+      
+      // Disable the tab buttons
+      const buttons = document.querySelectorAll('.tab button');
+        buttons.forEach(button => {
+        button.setAttribute('disabled', 'true');
+        });
+      
+      // Show processing message
+      const processingMessage = document.createElement('p');
+      processingMessage.id = 'processing-message';
+      processingMessage.textContent = 'Processing, please wait...';
+      processingMessage.style.color = '#e68a00'; // Style as needed
+      document.querySelector('.file-upload-section').appendChild(processingMessage);
+      };
+    
+      // Flash message auto-hide
+      setTimeout(function () {
+        let flashMessage = document.getElementById("flash-message");
+      if (flashMessage) {
+        flashMessage.style.transition = "opacity 1s ease";
+      flashMessage.style.opacity = 0;
+          setTimeout(() => flashMessage.remove(), 1000);
+        }
+      
+      // After processing is complete (You can adjust this based on your logic)
+      const processingMessage = document.getElementById('processing-message');
+      if (processingMessage) {
+        processingMessage.remove(); // Remove the processing message
+        }
+      
+      // Re-enable tab buttons
+      const buttons = document.querySelectorAll('.tab button');
+        buttons.forEach(button => {
+        button.removeAttribute('disabled');
+        });
+      }, 3000); // Adjust timing based on your upload duration
+    
+      // Function to open links in the same tab
+      function openLink(url) {
+        window.location.href = url; // Redirects to the specified URL in the same tab
+      // Remove "active" class from all buttons
+      const buttons = document.querySelectorAll('.tab button');
+        buttons.forEach(button => button.classList.remove('active'));
+      // Add "active" class to the clicked button
+      element.classList.add('active');
+      }
     </script>
 </body>