EnxDev opened a new pull request, #45541: URL: https://github.com/apache/superset/pull/45541
### SUMMARY When a dashboard chart refreshes, Superset swaps the whole chart for the loading spinner until the new response lands. On a dashboard with many charts finishing at different times, that makes the page flicker: each chart disappears and comes back. #34682 asks for the chart to stay visible, and the approach agreed in that thread is a spinner drawn over the chart instead of in place of it. #45234 already keeps the chart on screen during an auto-refresh, where the spinner is suppressed. This PR does the same for every other refresh of a dashboard chart that already has data: the "Refresh" menu item, refreshing the whole dashboard, a native filter change, a cross-filter. The chart stays as it was, a muted spinner sits on top of it, and the chart updates when the response arrives. How it works: - `ChartRenderer` used to keep the previous response on screen only while `suppressLoadingSpinner` was set. It now does so for any dashboard chart (`source === ChartSource.Dashboard`) with a valid previous response. The store keeps `queriesResponse` untouched on `CHART_UPDATE_STARTED`, so that response is still the last good one. `isRefreshing` is passed to `SuperChart` for these refreshes too, so the plugins that handle a chart staying mounted through a refresh (deck.gl Multiple Layers reloading its layers, ECharts Tree skipping its animation) behave the same way here. - `Chart` renders the chart container plus a floating `<Loading size="s" muted />` instead of the "Waiting on database" spinner, when the chart is in a dashboard and has previous data. The check is the same one `ChartRenderer` uses, pulled out into `hasValidPreviousData`, so the two components can't disagree and leave an empty box. - A filter change updates `formData` as soon as the new query starts, while the response on screen is still the old one. For most filters that's harmless, but Dynamic Group By changes `groupby`, so the old rows would be drawn against columns they don't have. While a chart is kept on screen, `ChartRenderer` draws the previous response with the form data that produced it, and switches to the new form data together with the new response. What doesn't change: - A chart with no previous data (first load, or the previous load failed) still shows the spinner and the "Waiting on database" message. - Auto-refresh still shows no spinner. - Explore still replaces the chart with the spinner while it runs a query. - A finished query with no rows still shows the no-results state. I went with the plain overlay the issue author demoed, without dimming or blurring the chart. The thread mentioned a light opacity overlay as an option, and that's easy to add if reviewers prefer it. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF | Dashboard chart with data, refresh in flight | Before | After | |---|---|---| | Manual refresh / filter change | Chart replaced by the spinner and "Waiting on database..." | Chart stays, muted spinner on top | | Auto-refresh | Chart stays, no spinner (#45234) | Unchanged | | No previous data | Spinner and message | Unchanged | | Explore | Spinner and message | Unchanged | ### TESTING INSTRUCTIONS ```bash cd superset-frontend npm run test -- src/components/Chart/ ``` New tests: - `ChartRenderer.refresh.test.tsx` (real `SuperChart`): a dashboard chart stays on screen through a manual refresh and shows the new data when it lands; the previous rows are drawn with the form data they were queried with until the new response arrives; an Explore chart is still hidden while it loads. - `Chart.test.tsx`: the overlay spinner over a dashboard chart with data, no spinner during an auto-refresh, the regular spinner when there's no previous data, and the regular spinner in Explore. - `ChartRenderer.test.tsx`: the old "does not render chart during loading when the spinner is not suppressed" case assumed a dashboard source; it now covers Explore, with a dashboard counterpart. Manually: 1. Open a dashboard with a few charts. 2. Slow down `/api/v1/chart/data` (devtools network throttling works). 3. Click "Refresh dashboard", or change a native filter. On master each chart is replaced by the spinner. With this change the charts stay up with a small spinner over them, then update. 4. Add a Dynamic Group By customization and change it. The chart keeps showing its current breakdown until the new one arrives. 5. Run a query in Explore: the spinner replaces the chart there as before. ### ADDITIONAL INFORMATION - [x] Has associated issue: Fixes #34682 - [ ] 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 - [ ] Introduces new feature or API - [ ] Removes existing feature or API The overlay approach comes from @VasilijeBursac's diff in #34682. 🤖 Generated with [Claude Code](https://claude.com/claude-code) -- 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]
