search

visualize-admin / visualization-tool

The tool for visualizing Swiss Open Government Data. Project ownership: Federal Office for the Environment FOEN
https://visualize.admin.ch
BSD 3-Clause "New" or "Revised" License
30 stars 3 forks source link

feat: Do not unmount the chart when data is being loaded #1451

Closed bprusinowski closed 4 months ago

bprusinowski commented 4 months ago

Closes #1126

Currently we unmount the whole chart component and use <Loading /> when data is being fetched via the ChartDataWrapper component.

In my opinion, this is suboptimal user experience, as we lose track of the old chart state when the data is being loaded, and immediately are presented with new state, losing the sense of the difference between prior and current charts.

As we take advantage of smooth transitions between chart states in several chart types, it should result in less obtrusive behavior of the chart component, especially when manipulating chart filters.

For an initial implementation I applied a semi-transparent LoadingOverlay component, this might be changed after @KerstinFaye's review 😁

I also discovered a bug in the hook for data loading we use, that results in missing loading indication of any kind for the charts – this is also fixed by this PR.

How to test

PR

  1. Go to this link.
  2. Play around with the filters.
  3. ✅ See that there is a semi-transparent loading overlay and that the chart is not unmounted.

PROD

  1. Go to this link.
  2. Play around with the filters.
  3. ❌ See that there's no indication of the data being fetched (bug in the data fetching hooks, previously the whole chart was being unmounted).
vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
visualization-tool ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 16, 2024 8:40am
KerstinFaye commented 4 months ago

Thanks @bprusinowski. It will very much improves user experience. That's really great.

I would shorten the loading information that appears after some seconds. Maybe "Processing large data sets. Please wait.", or"Optimizing large data processing. Please wait."?

Is there any way of not dimming the text but dimming the chart underneath? It seams like the text has the same color as its background but with more opacity. Maybe we could improve the contrast by increasing opacity of the chart so the text is darker than the chart? Alternative could be to increase opacity of the chart even more and simply make the loading text dark grey(#4F4F4F): https://www.figma.com/file/Hn9wvuEYLUmdJtg4KwZYUx/visualize.admin.ch---design?type=design&node-id=4014-117344&mode=design&t=7YyPUSj6GmUSojse-4

image

sosiology commented 4 months ago

@KerstinFaye @bprusinowski just a small heads up. The text for the current loading state (see screenshot) was defined by Thomas Bettler. If we intend on changing it, i would suggest we quickly check in with him. Please also do not forget the translations. Thanks!

image