richardfogaca opened a new pull request, #37459: URL: https://github.com/apache/superset/pull/37459
Summary
Implements real-time dashboard auto-refresh with visual status feedback,
pause controls, and flicker-free updates.
Key Features
1. Auto-Refresh Status Indicator
- Colored dot in the dashboard header shows current refresh state:
- 🟢 Green: Refreshed successfully on schedule
- 🔵 Blue: Fetching data or waiting for first refresh
- 🟡 Yellow: Delayed or 1 consecutive error
- 🔴 Red: 2+ consecutive errors
- ⚪ White: Paused (manually or by tab visibility)
- Tooltip on hover shows last refresh time, configured interval, and error
counts
2. Pause/Resume Controls
- Play/pause button next to the status indicator
- Immediate refresh when resuming before timer restarts
- Pause state is independent of tab visibility pause
3. Tab Visibility Auto-Pause (Opt-in)
- Automatically pauses auto-refresh when browser tab becomes inactive
- Immediately fetches data when user returns, then restarts timer
- Respects manual pause state - won't auto-resume if manually paused
4. Flicker Prevention
- Loading spinner suppression: Charts maintain previous data during
refresh
- FiltersBadge preservation: Filter indicators remain visible during
refresh
- Stable series ordering: Secondary sort prevents legend reordering in
ECharts
- Tree chart animation control: Disabled animations during refresh
- Status dot debouncing: Smooth color transitions
Before/After
Before: Auto-refresh showed toast notifications on each cycle, charts
flickered with loading spinners, no status indicator, no pause control.
After:
- Clean status indicator dot with informative tooltip
- Pause/play controls for manual control
- Smooth refresh without flickering or loading spinners
- Optional tab visibility pause with immediate refresh on return
<img width="681" height="194" alt="Screenshot 2026-01-26 at 20 56 03"
src="https://github.com/user-attachments/assets/54d5ce80-1c5f-49db-a66c-9c64e30e31c2";
/>
<img width="279" height="132" alt="Screenshot 2026-01-26 at 20 56 18"
src="https://github.com/user-attachments/assets/29126fb3-2941-43e0-8c35-24aca701d235";
/>
<img width="394" height="539" alt="Screenshot 2026-01-26 at 21 18 30"
src="https://github.com/user-attachments/assets/ff1a8924-645c-417e-8b6e-133e80e35830";
/>
Testing Instructions
Basic Auto-Refresh Status:
1. Open a dashboard and set an auto-refresh interval (e.g., 10 seconds)
2. Observe the status indicator dot appears next to the refresh controls
3. Watch the dot turn blue during fetch, then green on success
4. Hover over the indicator to see tooltip with last refresh time and
interval
Pause/Resume:
1. With auto-refresh enabled, click the pause button
2. Observe the dot turns white (paused state)
3. Click play to resume - charts should refresh immediately
4. Verify the timer restarts after resuming
Tab Visibility Pause:
1. Enable the "Pause on inactive tab" option in refresh settings
2. Switch to another browser tab for longer than the refresh interval
3. Return to the dashboard tab
4. Verify data refreshes immediately and timer restarts
Flickering Prevention:
1. Set a short refresh interval (e.g., 10 seconds)
2. Observe that charts don't show loading spinners during auto-refresh
3. Verify filter badges remain visible during refresh
4. Check that chart legends don't flicker or reorder
Error Handling:
1. Simulate network issues or chart errors
2. Verify the status dot turns yellow on first error, red on 2+ errors
3. Verify tooltip shows error information and count
### ADDITIONAL INFORMATION
- [x] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [x] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
