Recently, while working on a project with Vue.js 2 and Vuetify 2.6, I encountered an issue with heavy form rendering within expansion panels. There seems to be a slight delay in opening the panel section upon clicking the header, which is most likely due to the initial rendering process. Although the delay doesn't disrupt functionality, I would like to incorporate a progress indicator that displays instantly while the rendering takes place. Strangely, the progress indicator only shows up once the rendering is complete, even though the UI remains responsive during this time.
Is there a method to postpone the rendering of the panel section so that the progress indicator can first be displayed? Interestingly, the interface isn't unresponsive while the rendering occurs, allowing for the smooth animation of the progress indicator.
Unfortunately, utilizing the "eager" option for expansion panels is not feasible as it significantly slows down the loading time when dealing with numerous panels.
The provided code snippet presents this issue through a demonstrative example.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
loading: false
}),
methods: {
click() {
console.log('click')
this.loading = true
}
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d5d6c6e3918ddb">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdcbc8d8c9d4dbc4fd8f938b938c">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dfdcccddc0cfd0e99b879d879d">[email protected]</a>/dist/vuetify.min.css">
<v-app id="app">
<template>
<v-expansion-panels>
<v-expansion-panel @click="click">
<v-expansion-panel-header>
<template v-slot:default="{ open }">
<span>
<v-progress-circular
v-if="loading"
indeterminate
size="14"
width="2"
color="blue"
class="d-inline-block"
/>
</span>
<span>Click me! opened: {{ open }}</span>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-text-field v-for="(item, i) in 1500" :key="i" />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</template>
</v-app>