My current challenge involves loading multiple Vuetify card components based on the selected category at the top of the page.
The issue arises when the array renders more than 50 cards, causing a significant delay in loading time. While I am not overly concerned about the duration it takes to load, I do find it frustrating that the page becomes unresponsive during rendering and I am unable to use a loading indicator.
To illustrate the problem, I created a sample scenario here:
https://jsfiddle.net/owa1czqx/2/
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="cat in cats" :key="cat" @click="catSelected(cat)">{{cat}}</button>
<p v-for="item in items">{{ item }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
cats: ['cat 1', 'cat 2'],
items: []
},
methods: {
catSelected(newCat) {
this.items = []
for (let i = 0; i <= 50000; i++) {
this.items.push(i + '. ' + newCat)
}
}
}
})
I am looking for a way to provide user feedback indicating that new cards are being loaded before they actually appear. Is there a method to asynchronously render similar to asynchronous data fetching?
Regrettably, pagination or autoscroll loading is not a feasible solution in my case as it would disrupt the predefined layout.