From 9ab0b6a0fa55dd8513f3816bcea8e70fe0870aed Mon Sep 17 00:00:00 2001
From: Focuslinkstech <45756999+Focuslinkstech@users.noreply.github.com>
Date: Sat, 2 Mar 2024 12:40:04 +0100
Subject: [PATCH] improvement

just replace the save loading with css for better loading feature
---
 ui/ui/sections/footer.tpl      |  4 ++--
 ui/ui/sections/header.tpl      | 32 ++++++++++++++++++++++++++++++--
 ui/ui/sections/user-footer.tpl |  4 ++--
 ui/ui/sections/user-header.tpl | 31 ++++++++++++++++++++++++++++++-
 4 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/ui/ui/sections/footer.tpl b/ui/ui/sections/footer.tpl
index b8de8542..27091788 100644
--- a/ui/ui/sections/footer.tpl
+++ b/ui/ui/sections/footer.tpl
@@ -27,7 +27,7 @@
                         if (el.addEventListener) { // all browsers except IE before version 9
                             el.addEventListener("click", function() {
                                 $(this).html(
-                                    `<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
+                                    `<span class="loading"></span>`
                                 );
                                 setTimeout(() => {
                                     $(this).prop("disabled", true);
@@ -37,7 +37,7 @@
                             if (el.attachEvent) { // IE before version 9
                                 el.attachEvent("click", function() {
                                     $(this).html(
-                                        `<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
+                                        `<span class="loading"></span>`
                                     );
                                     setTimeout(() => {
                                         $(this).prop("disabled", true);
diff --git a/ui/ui/sections/header.tpl b/ui/ui/sections/header.tpl
index 066d5d37..e4229904 100644
--- a/ui/ui/sections/header.tpl
+++ b/ui/ui/sections/header.tpl
@@ -57,8 +57,36 @@
             max-height: 1em;
             line-height: 1em;
         }
-    </style>
-
+   
+        
+        .loading {
+          pointer-events: none;
+          opacity: 0.7;
+        }
+    
+        .loading::after {
+          content: "";
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+          margin-left: 10px;
+          border: 2px solid #fff;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.8s infinite linear;
+        }
+    
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+    
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      </style>
     {if isset($xheader)}
         {$xheader}
     {/if}
diff --git a/ui/ui/sections/user-footer.tpl b/ui/ui/sections/user-footer.tpl
index 2bf59e61..12c1e3cb 100644
--- a/ui/ui/sections/user-footer.tpl
+++ b/ui/ui/sections/user-footer.tpl
@@ -85,7 +85,7 @@
                         if (el.addEventListener) { // all browsers except IE before version 9
                             el.addEventListener("click", function() {
                                 $(this).html(
-                                    `<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
+                                    `<span class="loading"></span>`
                                 );
                                 setTimeout(() => {
                                     $(this).prop("disabled", true);
@@ -95,7 +95,7 @@
                             if (el.attachEvent) { // IE before version 9
                                 el.attachEvent("click", function() {
                                     $(this).html(
-                                        `<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
+                                        `<span class="loading"></span>`
                                     );
                                     setTimeout(() => {
                                         $(this).prop("disabled", true);
diff --git a/ui/ui/sections/user-header.tpl b/ui/ui/sections/user-header.tpl
index 5cc3b47f..af5343ca 100644
--- a/ui/ui/sections/user-header.tpl
+++ b/ui/ui/sections/user-header.tpl
@@ -37,7 +37,36 @@
                 margin-top: 100px;
             }
         }
-    </style>
+    
+        
+        .loading {
+          pointer-events: none;
+          opacity: 0.7;
+        }
+    
+        .loading::after {
+          content: "";
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+          margin-left: 10px;
+          border: 2px solid #fff;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.8s infinite linear;
+        }
+    
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+    
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      </style>
 
     {if isset($xheader)}
         {$xheader}