gravitee-ui-components
gravitee-ui-components copied to clipboard
[gc-chart-xxx] Blink when loading new data
Problem
When using a promise for the series
of a gv-chart, then the skeleton appears until the promise is resolved.
If we want to refresh the data, there is a blink before rendering the skeleton state.
One clue we have with @gaetanmaisse is when the component is updated, then it is re-rendered with old value before passing to skeleton
Concerned components
- gv-chart-pie
- gv-chart-bar
- gv-chart-line ( -> here there is no blink, but we see the data refreshing then pass to skeleton state)
How to reproduce
You can try with gv-chart-pie.stories.js
, Loading story and use the following as simulations
simulations: [
storyWait(0, ([component]) => {
component.series = new Promise((resolve) => (seriesResolver = resolve));
component.options = options;
}),
storyWait(750, () => {
seriesResolver(series);
}),
storyWait(1500, ([component]) => {
component.series = new Promise((resolve) => (seriesResolver = resolve));
component.options = options;
}),
storyWait(2250, () => {
seriesResolver(series);
}),
],