Add loading icon

IgniteKit · Mar 15, 2024 · a667f93 · a667f93
1 parent ccc44e1
commit a667f93
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/public/assets/script.js b/public/assets/script.js
@@ -97,12 +97,28 @@ IgniteKitDeactivateFeedback.FormHandler.prototype.start = function () {
     var FormDeactivate = document.getElementById(self.prefix + 'deactivate_feedback--form');
     FormDeactivate.addEventListener('submit', function (e) {
         e.preventDefault();
+        var form = FormDeactivate.closest('form');
+        if (form) {
+            form.classList.add('iwpdf-form-loading')
+        }
+        var button = FormDeactivate.querySelector('.iwpdf-form-submit');
+        if (button) {
+            button.setAttribute('disabled', '');
+        }
         var formData = new FormData(this);
         var httpReq = new XMLHttpRequest();
         httpReq.open('POST', FormDeactivate.action, true);
         httpReq.onreadystatechange = function () {
             if (httpReq.readyState === 4) {
                 self.deactivatePlugin();
+                setTimeout(function(){
+                    if (form) {
+                        form.classList.remove('iwpdf-form-loading');
+                    }
+                    if (button) {
+                        button.removeAttribute('disabled');
+                    }
+                },2000);
             }
         };
         httpReq.send(formData);

diff --git a/public/assets/style.css b/public/assets/style.css
@@ -180,4 +180,26 @@
 .iwpdf-modal__content p.iwpdf-modal__content-intro {
     margin-bottom: 20px;
     margin-top: 15px
-}
+}
+.iwpdf-modal__container form:not(.iwpdf-form-loading) .iwpdf-spin {
+    display:none;
+}
+.iwpdf-spin {
+    animation: iwpdf-dashicons-spin 1s infinite;
+    animation-timing-function: linear;
+}
+
+.iwpdf-form-submit .dashicons {
+    position: relative;
+    top: 3px;
+    margin-right: 3px;
+}
+
+@keyframes iwpdf-dashicons-spin {
+    0% {
+        transform: rotate( 0deg );
+    }
+    100% {
+        transform: rotate( 360deg );
+    }
+}
diff --git a/public/views/form.php b/public/views/form.php
@@ -68,7 +68,7 @@
                     </div>
                 </main>
                 <footer class="iwpdf-modal__footer">
-                    <button type="submit" class="iwpdf-form-submit button-primary"><?php echo esc_attr( $configuration->getTranslated( 'button_submit_deactivate' ) ); ?></button>
+                    <button type="submit" class="iwpdf-form-submit button-primary"><span class="dashicons dashicons-update iwpdf-spin"></span><?php echo esc_attr( $configuration->getTranslated( 'button_submit_deactivate' ) ); ?></button>
                     <button type="button" class="iwpdf-deactivate button-secondary"><?php echo esc_attr( $configuration->getTranslated( 'button_skip_deactivate' ) ); ?></button>
                 </footer>
             </form>