title: Vuetify: How to show overlay with spinner while v-data-table renders (how to wait for a component to finish rendering)
body: <p>I have a Vuetify v-data-table with about a 1000 rows in it. Rendering it for the first time and when text searching on it, the render takes a few seconds. During this time I want to overlay it with a scrim + spinner to indicate things are happening.</p>
  <p>The overlay:</p>
  <pre><code>    &lt;v-overlay
          :value=&quot;loading&quot;
          opacity=&quot;0.7&quot;
          absolute
          v-mutate=&quot;onMutate&quot;
      &gt;
          &lt;v-progress-circular indeterminate size=&quot;32&quot; color=&quot;blue&quot;&gt;&lt;/v-progress-circular&gt;
      &lt;/v-overlay&gt;
  </code></pre>
  <p>The v-data-table:</p>
  <pre><code>        &lt;v-data-table
              :headers=&quot;cHeaders&quot;
              :items=&quot;cLimitedData&quot;
              disable-pagination
              hide-default-footer
              :search=&quot;searchIntercepted&quot;
              @current-items=&quot;tstCurrentItems&quot;
          &gt;
  </code></pre>
  <p>The computed variable <code>cLimitedData</code>:</p>
  <pre><code>    cLimitedData() {
          if (this.indNoLimit) {
              return this.data
          } else {
              return this.data.slice(0,this.dtRowTo)
          }
      },
  </code></pre>
  <p>I watch the <code>search</code> variable, and when it changes, I set <code>loading</code> to true to activate the overlay.</p>
  <pre><code>watch: {
      search() {
          if (!this.indNoLimit) {
              // remove limit, this will cause cLimitedData to return all rows
              this.loading = true
              // -&gt; moved to onMutate
              //this.$nextTick(function () {
              //    this.indNoLimit = true
              //})
          } else {
              this.searchIntercepted = this.search
          }
      },
  </code></pre>
  <p>However, the overlay doesn't activate until after the v-data-table had finished rendering. I've tried a million things, one of them is to put a <code>v-mutate=&quot;onMutate&quot;</code> on the overlay, and only when it fired, would I <code>this.indNoLimit = true</code> to set things in motion, but that is still not good enough to have the scrim start before the v-data-table begins reloading itself.</p>
  <pre><code>    onMutate(thing1) {
          console.log('@onMutate',thing1)
          this.$nextTick(function () {
              this.indNoLimit = true
              this.searchIntercepted = this.search
          })
      },
  </code></pre>
  <p>I also found that the next tick in @current-items fairly reliably marked the end of the render of the v-data-table, thus the deactivation of the scrim is probably going to be ok:</p>
  <pre><code>    tstCurrentItems(thing1) {
          console.log('@current-items',thing1)
          this.$nextTick(function () {
              console.log('@current-items NEXT')
              this.loading = false
          })
  </code></pre>
  <p><strong>I believe my question should be: how can I detect/wait for components to have rendered (the v-overlay+v-progress-circular) before making changes to other components (the v-data-table).</strong></p>
  <p><em>Note: To solve the initial wait time of loading of the table, I found a way to progressively load it by inserting div-markers that trigger a v-intersect. However, this does not solve the situation when a user searches the whole data set when only the first 50 rows are loaded.</em></p>
  <p>EDIT: Tried to start the update of the table after the overlay has been activated using <a href="https://github.com/twickstrom/vue-force-next-tick" rel="nofollow noreferrer">https://github.com/twickstrom/vue-force-next-tick</a>, but still no luck. It almost looks like vue tries to aggregate changes to the DOM instead of executing them one by one.</p>