I'm facing an issue where the loader for long data processing doesn't show up until after the processing is complete. I have a large object containing thousands of key-value items that I want to make filterable, which works but takes a few seconds to load. I am using VueJS 2.
To indicate to users to "please wait" while the processing is ongoing, I am using the isworking value. I have a span with v-if="isworking", initially set to false.
When setting the this.isworking property in the first line of code, instead of displaying the "please wait" message immediately, the function hangs for a few seconds before changing the isworking property to true once the processing is done - I confirmed this by removing the last isworking=false. I can't seem to figure out why it delays updating the property to true until after the lengthy processing finishes.
The window.deaccent method is used to replace accented characters in strings with basic ANSI characters.
In the template, I have a simple form structure:
<form @submit="searchmath">
<span v-if="working">please wait</span>
<input v-model=...>
<div v-for="(item,index) in searchmatchitems"> ... </div>
</form>
The method in the component looks like this:
searchmatch: function($event){
this.isworking = true;
this.$forceUpdate(); // also tried this, but no luck
$event.stopPropagation();$event.preventDefault();
try{
var searchid = window.deaccent(this.search_string.toLowerCase());
var searchobj = this.cdata;
let result = Object.keys(this.cdata).filter(function(el,i,c){
var elk = window.deaccent(el).toLowerCase();
var elv = window.deaccent(searchobj[el]);
return elk.indexOf(searchid) > -1 || elv.indexOf(searchid) > -1;
}, searchid);
this.searchmatchitems = result;
this.isworking = false;
} catch(e){ console.log(e); this.isworking = false; return [];}
}
I've also attempted moving the event.preventDefault() to the end just to ensure it's not causing any issues, but unfortunately, it didn't help.
The cdata object is a simple key-value structure with approximately 4000 items like this:
data: {
cdata: {
"lorem": "aa",
"ipsum": "bc",
"dolor": "de",
....
},
isworking: false,
....
}