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();