Merge pull request #1096 from Aqib-Webkul/web_form_loader

Issue #847 fixed
krayin · Sep 13, 2022 · e1c9bf1 · e1c9bf1
2 parents ca3808a + d6b974d
commit e1c9bf1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js.blade.php b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js.blade.php
@@ -41,6 +41,11 @@
 
             $("#krayinWebForm").validate({
                 submitHandler: function(form) {
+
+                    document.querySelector('#loaderDiv').classList.add('loaderDiv');
+
+                    document.querySelector('#imgSpinner').classList.add('imgSpinner');
+
                     $.ajax({
                         url: "{{ route('admin.settings.web_forms.form_store', $webForm->id) }}",
                         type: 'post',
@@ -50,6 +55,11 @@
                         },
                         dataType: 'json',
                         success: function (data) {
+
+                            document.querySelector('#loaderDiv').classList.remove('loaderDiv');
+
+                            document.querySelector('#imgSpinner').classList.remove('imgSpinner');
+
                             var validator = $("#krayinWebForm").validate();
 
                             if (data.message) {
@@ -64,6 +74,11 @@
                         },
 
                         error: function (data) {
+
+                            document.querySelector('#loaderDiv').classList.remove('loaderDiv');
+
+                            document.querySelector('#imgSpinner').classList.remove('imgSpinner');
+
                             var validator = $("#krayinWebForm").validate();
 
                             for (var key in data.responseJSON.errors) {

diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php
@@ -20,11 +20,41 @@
     .anonymous-layout-container {
         background-color:<?= $webForm->background_color ?>;
     }
+
+    .loaderDiv {
+        z-index: 20;
+        position: absolute;
+        top: 0;
+        left:-5px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.4);
+    }
+
+    .imgSpinner {
+        position: absolute;
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        top: 40%;
+        left:45%;
+        animation: spin 2s linear infinite;
+	}
+	
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
 </style>
 
 
 <div class="anonymous-layout-container">
     <div class="center-box">
+        <section id="loaderDiv">
+            <div id="imgSpinner"></div>
+        </section>
         <div class="adjacent-center">
             <div class="title-box">
             <img src="{{ url('vendor/webkul/admin/assets/images/logo.svg') }}" alt="krayin">