From 39aad231cd58a0b0649939e65d497818f86d88db Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Fri, 11 Oct 2024 18:15:06 +0200
Subject: [PATCH] ui: Main price chart fixes/updates.

---
 basicswap/static/js/pricechart.js | 65 ++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/basicswap/static/js/pricechart.js b/basicswap/static/js/pricechart.js
index 780347d..985207b 100644
--- a/basicswap/static/js/pricechart.js
+++ b/basicswap/static/js/pricechart.js
@@ -1023,13 +1023,14 @@ const app = {
   },
 
   toggleAutoRefresh: () => {
-    if (app.isAutoRefreshEnabled) {
-      app.stopAutoRefresh();
-    } else {
-      app.startAutoRefresh();
-    }
-    app.updateAutoRefreshButton();
-  },
+  if (app.isAutoRefreshEnabled) {
+    app.stopAutoRefresh();
+  } else {
+    app.startAutoRefresh();
+    app.startSpinAnimation();
+  }
+  app.updateAutoRefreshButton();
+},
   
   updateNextRefreshTime: () => {
     const nextRefreshSpan = document.getElementById('next-refresh-time');
@@ -1061,27 +1062,37 @@ const app = {
   },
 
   updateAutoRefreshButton: () => {
-    const button = document.getElementById('toggle-auto-refresh');
-    if (button) {
-      if (app.isAutoRefreshEnabled) {
-        button.classList.remove('text-gray-600', 'dark:text-gray-400');
-        button.classList.add('text-green-500', 'dark:text-green-400');
-      } else {
-        button.classList.remove('text-green-500', 'dark:text-green-400');
-        button.classList.add('text-gray-600', 'dark:text-gray-400');
-      }
-      button.title = app.isAutoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh';
-      
-      const svg = button.querySelector('svg');
-      if (svg) {
-        if (app.isAutoRefreshEnabled) {
-          svg.classList.add('animate-spin');
-        } else {
-          svg.classList.remove('animate-spin');
-        }
-      }
+  const button = document.getElementById('toggle-auto-refresh');
+  if (button) {
+    if (app.isAutoRefreshEnabled) {
+      button.classList.remove('text-gray-600', 'dark:text-gray-400');
+      button.classList.add('text-green-500', 'dark:text-green-400');
+      app.startSpinAnimation();
+    } else {
+      button.classList.remove('text-green-500', 'dark:text-green-400');
+      button.classList.add('text-gray-600', 'dark:text-gray-400');
+      app.stopSpinAnimation();
     }
-  },
+    button.title = app.isAutoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh';
+  }
+},
+
+startSpinAnimation: () => {
+  const svg = document.querySelector('#toggle-auto-refresh svg');
+  if (svg) {
+    svg.classList.add('animate-spin');
+    setTimeout(() => {
+      svg.classList.remove('animate-spin');
+    }, 2000); // Remove the animation after 2 seconds
+  }
+},
+
+stopSpinAnimation: () => {
+  const svg = document.querySelector('#toggle-auto-refresh svg');
+  if (svg) {
+    svg.classList.remove('animate-spin');
+  }
+},
     
   refreshAllData: async () => {
     ui.showLoader();