Wrap Chart Initailization in next tick
In some instances of charts usage, mounted
does not guarantee that the chart's DOM is fully initialized. To guarentee all child nodes are present, wrapping initialization in a $nextTick
is necessary.
Slack thread
afontaine 5 hours ago
I came across a very strange interaction between GlTabs and our charts libraries yesterday where it seemed as though the charts didn’t initialize properly and would not update? I ran out of time to debug the issue, but was wondering if anyone else has seen anything similar?
MR for reference: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/51517#note_483995462
Enrique 5 hours ago
Perhaps, it is a race condition where the chart initialization function is executed before the tab is mounted. As a result, the chart can’t find the DOM node it attaches to
Enrique 5 hours ago
Your observation about toggling the loading property makes me think that. If loading changes, the chart component is re-rendered
afontaine 5 hours ago
yeah that is my thought as well
afontaine 5 hours ago
in which case, would there be a better way of fixing the issue than my toggling a useless property?
afontaine 5 hours ago
it looks like the chart is initialized in the mounted hook, would wrapping it all in a $nextTick be preferred?
Enrique 5 hours ago
would wrapping it all in a $nextTick be preferred?
I’d prefer that because it is the only way to ensure that the DOM hierarchy’s is fully mounted. mounted does not ensure that the children of the component where we attach that hook are mounted as well.
afontaine 5 hours ago
cool :thumbsup: I will play around with gitlab-ui and make sure that works :smile:
sarahghp 5 hours ago
I think @f_caplette has run into this too and the $nextTick was the result
f_caplette 5 hours ago
@sarahghp is correct! I had a similar issue where some logic that required some child component to be mounted, which isn't guaranteed in the mounted lifecycle. It only guarantees that the current component is mounted to the DOM, not its children. Wrapping it in a nextTick has fixed it for me and it's also the recommended step in the Vue doc
f_caplette 5 hours ago
Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:
https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted