0

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.

9
  • In the code you show us, you didn't show when sordedRows is call and if this.loading is a reactive property and what is the starting value. To test your guess about the fact the sort is so quick that it just happen, you can simply comment the this.loading = false, and check if the div shows up. Commented Jun 2, 2023 at 6:39
  • @MarioSantini ok, i thought thats clear, but added it as u pointed out Commented Jun 2, 2023 at 6:57
  • @PM_KLS Do you have this variable loading initialized in your data: function() {} ? I see only 'sortBy' and 'rows' as declared ones. Commented Jun 2, 2023 at 7:10
  • @Vitomir sure 'loading' initialized as false, added to sample code Commented Jun 2, 2023 at 7:36
  • 1
    You can test your code by adding a timeout to this.loading = false. If the icon does not show up, you know for sure that it isn't showing. Commented Jun 2, 2023 at 7:47

2 Answers 2

1

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

Sign up to request clarification or add additional context in comments.

5 Comments

This should be a comment. Also OP pointed this out in his comment 18 minutes before you posted this anwser.
@Wimanicesir well im the OP and i chose to answer my own question, because i see this is not the sorting issue, its rendering performacne issue, so i consider this solved
@Wimanicesir, you're completely wrong. Just because it's brief it doesn't mean it's not the answer to the question. Or the correct answer. Could it be improved and/or expanded? Absolutely! Should it be a comment? Absolutely not. It is detrimental for Stack Overflow to post answers as comments. They tend not to help future users having the same problem and it hinders proper indexing and they also determine users who would otherwise answer the question from posting the answer.
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
@tao I missed this was the OP. However, I can only change my vote if this is editted. Also this isn't an answer, this is saying what the problem was, still not how to solve it. I don't know how future users are going to use this 'answer'.. IMO, this still should be editted in the question as the real solution will derive from this.
-1

"Sorting items takes almost 2 seconds" and "May it be sort is quick" are against each other, but you can't see the loading indicator in either of them. Usually, a sort finishes in some ms, you can barely see anything. Another possibility is if it runs for 2 seconds (slow algorithm or rendering thousands of rows on the page after sort), it blocks the main thread and you won't see any changes on the page.

Your code should work, but you shouldn't change data in computed. The sort method mutating the original array, and you change the loading variable. It can also run multiple times unnecessarily.

3 Comments

yeas i already found sort is really only ~20ms, so the long time is when the items beeing rerendered. About i should not change data in cpmputed, thats the whole point of computed... i use console log, and see recomputing ONLY happens if i click button, so it really does it 'once' upon click... but how can i wait for large list to be rerendered? can i tell re-rendering has ended ?
This should have been a comment. Then you would also see that half of your answer is already said :)
Computed is a getter, it should only alter a copy of the data. From the doc: "It is important to remember that computed getter functions should only perform pure computation and be free of side effects.". To speed up rendering, you can use any of these techniques: infinity scroll, pagination, virtual list

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.