torbjorn/antigravity-claude-proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(ui): optimize dashboard chart updates and rendering

Browse Source 
Add debouncing to chart updates to prevent rapid flickering, implement checks to avoid redundant history processing and double renders, and disable quota chart animations to fix visual glitches.
This commit is contained in:
jgor20
2026-01-11 15:34:51 +00:00
parent a76c364921
commit dde2910a1d
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/js/components/dashboard.js
View File

@@ -45,13 +45,24 @@ window.Components.dashboard = () => ({
this.$watch('$store.data.accounts', () => { this.$watch('$store.data.accounts', () => {
if (this.$store.global.activeTab === 'dashboard') { if (this.$store.global.activeTab === 'dashboard') {
this.updateStats(); this.updateStats();
this.$nextTick(() => this.updateCharts()); // Debounce chart updates to prevent rapid flickering
if (this._debouncedUpdateCharts) {
this._debouncedUpdateCharts();
} else {
this._debouncedUpdateCharts = window.utils.debounce(() => this.updateCharts(), 100);
this._debouncedUpdateCharts();
}
} }
}); });
// Watch for history updates from data-store (automatically loaded with account data) // Watch for history updates from data-store (automatically loaded with account data)
this.$watch('$store.data.usageHistory', (newHistory) => { this.$watch('$store.data.usageHistory', (newHistory) => {
if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) { if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) {
// Optimization: Skip if data hasn't changed (prevents double render on load)
if (this.historyData && JSON.stringify(newHistory) === JSON.stringify(this.historyData)) {
return;
}
this.historyData = newHistory; this.historyData = newHistory;
this.processHistory(newHistory); this.processHistory(newHistory);
this.stats.hasTrendData = true; this.stats.hasTrendData = true;
@@ -59,17 +70,22 @@ window.Components.dashboard = () => ({
}); });
// Initial update if already on dashboard // Initial update if already on dashboard
// Note: Alpine.store('data') may already have data from cache if initialized before this component
if (this.$store.global.activeTab === 'dashboard') { if (this.$store.global.activeTab === 'dashboard') {
this.$nextTick(() => { this.$nextTick(() => {
this.updateStats(); this.updateStats();
this.updateCharts(); this.updateCharts();
// Load history if already in store // Optimization: Only process history if it hasn't been processed yet
// The usageHistory watcher above will handle updates if data changes
const history = Alpine.store('data').usageHistory; const history = Alpine.store('data').usageHistory;
if (history && Object.keys(history).length > 0) { if (history && Object.keys(history).length > 0) {
this.historyData = history; // Check if we already have this data to avoid redundant chart update
this.processHistory(history); if (!this.historyData || JSON.stringify(history) !== JSON.stringify(this.historyData)) {
this.stats.hasTrendData = true; this.historyData = history;
this.processHistory(history);
this.stats.hasTrendData = true;
}
} }
}); });
} }

4
public/js/components/dashboard/charts.js
View File

@@ -297,8 +297,8 @@ window.DashboardCharts.updateCharts = function (component) {
title: { display: false }, title: { display: false },
}, },
animation: { animation: {
animateScale: true, // Disable animation for quota chart to prevent "double refresh" visual glitch
animateRotate: true, duration: 0
}, },
}, },
}); });