feat&fix: implement auto-refresh functionality and disable animation when refresh

monitor/static/index.js

@@ -10,8 +10,33 @@ document.addEventListener('DOMContentLoaded', () => {
 
 let allTaskData = null;
 let currentFilter = 'all';
+let isRefreshing = false; // Flag to indicate page refresh state
+let lastRefreshTime = 0; // Track last refresh time to prevent too frequent refreshes
+const REFRESH_COOLDOWN = 3000; // 3 seconds cooldown between refreshes
 
 function refreshPage() {
+    // Check if enough time has passed since last refresh
+    const now = Date.now();
+    if (isRefreshing || now - lastRefreshTime < REFRESH_COOLDOWN) {
+        console.log('Refresh cooldown in progress...');
+        return;
+    }
+    
+    lastRefreshTime = now;
+    
+    // Add refresh animation to button
+    const refreshBtn = document.querySelector('.fab-refresh i');
+    if (refreshBtn) {
+        refreshBtn.classList.add('fa-spin');
+        // Remove spin after 1 second
+        setTimeout(() => {
+            refreshBtn.classList.remove('fa-spin');
+        }, 1000);
+    }
+    
+    // Add no-transition to body during refresh
+    document.body.classList.add('no-transition');
+    
     // Save expanded state before refresh
     const expandedTaskTypes = [];
     document.querySelectorAll('.task-type').forEach(section => {
@@ -24,18 +49,64 @@ function refreshPage() {
     // Store in sessionStorage
     sessionStorage.setItem('expandedTaskTypes', JSON.stringify(expandedTaskTypes));
     
+    // Set refreshing flag to true before fetching data
+    isRefreshing = true;
     fetchTasks();
 }
 
 function fetchTasks() {
+    const currentTime = Date.now();
+    // Check if the last refresh was within the cooldown period
+    if (currentTime - lastRefreshTime < REFRESH_COOLDOWN) {
+        // If within cooldown, just reset the refreshing flag and return
+        isRefreshing = false;
+        return;
+    }
+    
+    // Show loading spinner or add refreshing class
+    const container = document.getElementById('task-container');
+    if (isRefreshing) {
+        // Don't show loading spinner on refresh to avoid flickering
+        container.classList.add('refreshing');
+    } else {
+        container.innerHTML = `
+            <div class="loading-spinner">
+                <div class="spinner"></div>
+                <div>Loading task data...</div>
+            </div>
+        `;
+    }
+    
     fetch('/api/tasks')
         .then(response => response.json())
         .then(data => {
             allTaskData = data;
             renderTasks(data);
             updateStatistics(data);
+            // Reset refreshing flag and classes after rendering
+            container.classList.remove('refreshing');
+            setTimeout(() => {
+                isRefreshing = false;
+                document.body.classList.remove('no-transition');
+                document.querySelectorAll('.no-transition').forEach(el => {
+                    el.classList.remove('no-transition');
+                });
+            }, 50);
+            // Update the last refresh time
+            lastRefreshTime = currentTime;
         })
-        .catch(error => console.error('Error fetching tasks:', error));
+        .catch(error => {
+            console.error('Error fetching tasks:', error);
+            container.innerHTML = `
+                <div class="error-message">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <div>Error loading task data. Please try again.</div>
+                </div>
+            `;
+            isRefreshing = false;
+            container.classList.remove('refreshing');
+            document.body.classList.remove('no-transition');
+        });
 }
 
 function setTaskFilter(filter) {
@@ -139,6 +210,11 @@ function renderTasks(data) {
         const typeSection = document.createElement('div');
         typeSection.className = 'task-type';
         
+        // Add no-transition class if page is refreshing
+        if (isRefreshing) {
+            typeSection.classList.add('no-transition');
+        }
+        
         // Create header with task type name and statistics
         const typeHeader = document.createElement('div');
         typeHeader.className = 'task-type-header';
@@ -284,6 +360,8 @@ function renderTasks(data) {
         typeHeader.addEventListener('click', (event) => {
             // Prevent toggling when clicking task cards
             if (!event.target.closest('.task-card')) {
+                // Remove no-transition class if it exists before toggling
+                typeSection.classList.remove('no-transition');
                 typeSection.classList.toggle('collapsed');
                 
                 // Set appropriate aria attributes for accessibility
@@ -311,4 +389,20 @@ function renderTasks(data) {
         
         container.appendChild(typeSection);
     });
+    
+    // Remove no-transition class after rendering all elements
+    if (isRefreshing) {
+        setTimeout(() => {
+            document.querySelectorAll('.no-transition').forEach(el => {
+                el.classList.remove('no-transition');
+            });
+        }, 100);
+    }
 }
+
+// add auto-refresh with time interval 10 seconds
+setInterval(() => {
+    if (!isRefreshing) {
+        refreshPage();
+    }
+}, 10000); // 10 seconds interval