gravitee-ui-components icon indicating copy to clipboard operation
gravitee-ui-components copied to clipboard

[gc-chart-xxx] Blink when loading new data

Open ytvnr opened this issue 3 years ago • 0 comments

Problem

When using a promise for the seriesof 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);
    }),
  ],

ytvnr avatar Mar 19 '21 05:03 ytvnr