added a full screen loader

templates/index.html

@@ -155,22 +155,34 @@
 
     </div>
 
+    <!-- Global Full-screen Loader Overlay -->
+    <div id="global-loader" style="display:none;" class="fixed inset-0 z-50 bg-black/70 flex items-center justify-center">
+        <div class="flex flex-col items-center">
+            <svg class="animate-spin h-16 w-16 text-pink-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p class="mt-4 text-lg">Processing... Please wait.</p>
+        </div>
+    </div>
+
     <!-- Cropper.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
 
     <script>
         let cropper;
 
-        // Spinner
+        // Global loader on every submit
         document.getElementById('tryon-form').addEventListener('submit', function(e) {
+            const overlay = document.getElementById('global-loader');
+            if (overlay) overlay.style.display = 'flex';
+
             // If garment cropper is active → replace original file with cropped version
             if (cropper) {
                 e.preventDefault();
 
                 cropper.getCroppedCanvas().toBlob((blob) => {
-                    const file = new File([blob], "cropped_garment.png", {
-                        type: "image/png"
-                    });
+                    const file = new File([blob], "cropped_garment.png", { type: "image/png" });
 
                     // Replace original input
                     const dataTransfer = new DataTransfer();
@@ -180,10 +192,8 @@
                     // Now submit form
                     e.target.submit();
                 });
+                return;
             }
-
-            document.getElementById('placeholder-text').style.display = 'none';
-            document.getElementById('loading-spinner').style.display = 'flex';
         });
 
         // Change Person function