added spinner on form create/edit

resources/views/backend/pages/forms/other/edit.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -67,6 +86,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Update</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -80,5 +107,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+        
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection