title: Show loading during rendering multiple components in Vue
body: <p>I have issue where I am loading multiple Vuetify card components based on category selected on top of the page.</p>
  
  <p>The issue is if the array renders +50 cards then it takes significant time to load. I don't mind about loading time it takes but I don't like that the page gets stuck during rendering and I can't use loading indicator.</p>
  
  <p>I have tried mimic the issue here: </p>
  
  <p><a href="https://jsfiddle.net/owa1czqx/2/" rel="nofollow noreferrer">https://jsfiddle.net/owa1czqx/2/</a></p>
  
  <pre><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;  
    &lt;button v-for="cat in cats" :key="cat" @click="catSelected(cat)"&gt;{{cat}}&lt;/button&gt;
    &lt;p v-for="item in items"&gt;{{ item }}&lt;/p&gt;
  &lt;/div&gt;
  
  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 &lt;= 50000; i++) {
          this.items.push(i + '. ' + newCat)
        }
      }
    }
  })
  </code></pre>
  
  <p>What I would love to have is to give user feedback that the new cards are loading before they render. Is it possible to somehow async render like I async fetch if I load data?</p>
  
  <p>Unfortunately, pagination or autoscroll loading is not valid solution in my case as it will break the set layout.</p>