css animations

lwsadmin/lws/static/main.css

@@ -29,11 +29,11 @@ input {
     display: none !important;
 }
 
-.htmx-request .indicator{
+.indicator .htmx-request{
     display:inline;
 }
 
-.htmx-request.indicator{
+.indicator.htmx-request{
     display:inline;
 }
 
@@ -41,12 +41,16 @@ input {
     text-decoration: underline dotted;
 }
 
-#show_wallets {
+.showFade {
-    animation-name: example;
+    animation-name: render;
-    animation-duration: 4s;
+    animation-duration: .5s;
 }
 
-@keyframes example {
+@keyframes render {
-    from {background-color: red;}
+    from {
-    to {background-color: yellow;}
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

lwsadmin/lws/templates/index.html

@@ -14,11 +14,24 @@
 
 <div>
   <h3>Accounts</h3>
-  <div hx-get="/htmx/show_wallets" hx-target="#show_wallets" class="button outline" hx-indicator="#refreshLoader">
+  <div hx-get="/htmx/show_wallets" hx-target="#show_wallets" class="button outline" hx-indicator="#refresh_loader" onclick="handleRefresh()">
     Refresh
-    <i class="fa-solid fa-rotate-right indicator" id="refreshLoader"></i>
+    <i class="fa-solid fa-rotate-right indicator" id="refresh_loader"></i>
   </div>
-  <div hx-trigger="load" hx-get="/htmx/show_wallets" id="show_wallets"></div>
+  <div hx-trigger="load" hx-get="/htmx/show_wallets" id="show_wallets" onload=""></div>
 </div>
 
+<script>
+  function handleRefresh() {
+    const show_wallets = document.getElementById('show_wallets'); 
+    const loader = document.getElementById('refresh_loader');
+    loader.classList.add('fa-spin');
+    show_wallets.classList.add('showFade');
+    setTimeout(function() {
+      show_wallets.classList.remove('showFade');
+      loader.classList.remove('fa-spin');
+    }, 2000)
+  }
+</script>
+
 {% endblock %}