I am currently facing an issue with updating 10 apexcharts bar charts simultaneously in a Vue app. When this process occurs, it takes approximately one second to load completely, and during that time, I would like to display an svg spinner. However, the conventional method of using a v-if="showSpinner" on a div containing the spinner, and setting showSpinner.value = true for const showSpinner = ref(false) does not seem to be effective. Here is an example:
<template>
<div v-if="showSpinner">
[svg spinner]
</div>
<div>
[10 apexcharts being updated at once with existing data]
</div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
const showSpinner = ref(false);
const state = reactive({
dataForCharts: {},
});
const someFuncThatGetsCalledMuchLater = () => {
showSpinner.value = true;
nextTick(() => {
// code to modify state.dataForCharts and redraw the charts
});
}
</script>
Even without considering the code needed to eventually set showSpinner.value = false (which presents another challenge), the above code fails to display the spinner until after all the charts have finished updating, seemingly causing the webpage to freeze for a second due to JavaScript's single-threaded nature.
Therefore, my main concerns are:
- How can I ensure the svg spinner appears before the chart updates begin, preventing the webpage from freezing?
- I haven't reached this point yet as the first concern remains unresolved, but how can I detect a callback signaling the completion of the chart updates? Directives do not seem suitable since they only act on attached elements, and setting showSpinner.value = false within onUpdated(...) would likely negate the prior showSpinner.value = true assignment.