From edcaf1b18a839eff93bc2886a36b783a22fbfdc2 Mon Sep 17 00:00:00 2001 From: Guillaume Cusnieux Date: Tue, 23 Mar 2021 16:12:42 +0100 Subject: [PATCH] fix: remove blink effect when refresh skeleton attribute fix #309 --- src/mixins/with-skeleton-attribute.js | 10 ++++++++-- stories/charts/gv-chart-pie.stories.js | 9 +++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/mixins/with-skeleton-attribute.js b/src/mixins/with-skeleton-attribute.js index e0c198f4e..b1cfd5490 100644 --- a/src/mixins/with-skeleton-attribute.js +++ b/src/mixins/with-skeleton-attribute.js @@ -54,7 +54,14 @@ export function withSkeletonAttribute(ParentClass) { constructor() { super(); + this._reset(); + } + + _reset() { this._invisible = true; + if (this._skeletonAttribute != null && this[`_${this._skeletonAttribute}`] != null) { + delete this[`_${this._skeletonAttribute}`]; + } this._skeleton = false; this._error = false; this._empty = false; @@ -62,8 +69,7 @@ export function withSkeletonAttribute(ParentClass) { updated(changedProperties) { if (this._skeletonAttribute != null && changedProperties.has(this._skeletonAttribute)) { - this._error = false; - this._empty = false; + this._reset(); const start = new Date().getTime(); let end = null; const timer = setTimeout(() => { diff --git a/stories/charts/gv-chart-pie.stories.js b/stories/charts/gv-chart-pie.stories.js index 2b487d07c..e878539a3 100644 --- a/stories/charts/gv-chart-pie.stories.js +++ b/stories/charts/gv-chart-pie.stories.js @@ -79,6 +79,15 @@ export const Loading = makeStory(conf, { storyWait(750, () => { seriesResolver(series); }), + + storyWait(1500, ([component]) => { + component.series = new Promise((resolve) => (seriesResolver = resolve)); + component.options = options; + }), + + storyWait(2250, () => { + seriesResolver(series); + }), ], });