Vue - show loader while computed property being computed

Question

EDIT - Found that sorting is quick, real issue is performance of rendering huge list, so already answered

pls explain to me, why this does nothing:

I have array of thousands of items, there is a button for sorting them by some prop (changes "sortBy" prop. Sorting items takes almost 2 seconds, at least that how long after the click does the list change. During computing (until new list displayed) i want to display some "Loading" element. Im not aware, byt maybe Vue has some app-wide state to tell something is being recomputed?

<div v-if="loading">Wait pliz</div>
<div @click="sortBy='ctg'">SortByCtg</div>
<div v-for="item in sortedRows">{{item.ctg}} , {{item.name}} .... </div>

and the computed prop fn:

data: function(){ 
   return { 
    'sortby': 'name', 
    'sortbyDir': 1, 
    'loading': false,
    'rows': [ {'name':'abc','ctg':'def'}, ...] 
  }
},
computed: {
    sortedRows: function(){
     this.loading = true; //  <<< should show element
     var sortby = this.sortby;
     var sortbyDir = this.sortbyDir;
     var sorted = this.rows;
     sorted = this.rows.sort(function(a, b) { 
      return sortbyDir * a[sortby].localeCompare(b[sortby]); 
     });
    this.loading = false; //  <<< hide element
    return sorted;
  }
},
...

but the "loading" element never shows. May it be sort is quick, and what is taking the time is the nodes generation itself? Then can i anyhow show the loader? Maybe somehow use next tick? I tried but with no result.

Answer 1

Sorting is quick (few miliseconds), what really takes time is rendering the long list