Ensure GlSingleStat animates when data is changed
Problem
With the introduction of animateOnMount
being false
for the animated number utility in gitlab-ui, an animation is only triggered on the GlSingleStat
component when the value prop is changed, after the component has been mounted.
Our current implementations of GlSingleStat
conditionally render and remove the component based on the loading states of API requests, which instead of resulting in a simple prop update, results in an entire component remount. This causes the animation to never be triggered.
Solution
We can refactor our implementations of GlSingleStat
from using v-if
to v-show
. This will ensure that the component only mounts once and each subsequent update triggers a prop update instead of a component remount.
Steps
- Inspect each instance of
GlSingleStat
- Where updates to data can occur, i.e. filters available etc, replace
v-if
withv-show
- Update tests as these will break on
exists
Notes
There are 6 instances of GlSingleStat
looks like 3 or 4 instances are subject to data changes requiring animation.