How do I decrease the delay of the query?

Ask the community
,
1

Hi,

I am having a bit of issue when generating options for a dropdown. I have two dropdowns, the options of the second dropdown is dictated by the value of the first dropdown. However I noticed that after choosing the value of the first dropdown, there’s always a delay of 1-3 secs before I can see the appropriate options in the second dropdown. It’s not great for user experience and my users have been complaining about it. How do I make sure there’s no delay when generating the options in the second dropdown? Thanks!

Here is an example code:

$w(‘#eventType’).onChange(()=>{
let type = $w(‘#eventType’).value;
if (type === “Work”) {
querySkills()
.then(result=>{
let options = result.items.map(x=>{
let data = {
label: x.skill,
value: x.skill
}
return data
})
$w(‘#eventTopic’).options = options
})
. catch (error=>{
console.log(error)
})
}

Note: the code for querySkills()

export function querySkills () {
return wixData.query(“PrototypeProfessionalSkills”)
.ascending(“skill”)
.find()
}

2

Can you also put here the code for the querySkills() function?

3

Hi, just did. Please see the updated post. Thanks!

4

So, I don’t see any reason why you wait until the user selects an option from dropdown1 and only then you run the query.
Why won’t you run the query before that?

5

Hi,

How do I do that? Would you mind suggesting how to change the code?

I am fairly new to coding, and still learning my ropes…

6

You can try something like this:

import wixData from 'wix-data';
let options;
querySkills ();
function querySkills () {
 return wixData.query("PrototypeProfessionalSkills")
        .ascending("skill")
        .find()
         .then((res) => {
         let items = res.items;
         options = items.map(e => {e.label = e.skill; e.value = e.skill})
         return options;
  })
}
async function getSkills(){
 options = await querySkills();
 $w('#eventTopic').options = options;
}

$w.onReady( function() {
 $w('#eventType').onChange(()=>{
  if($w('#eventType').value === "Work"){
    if(typeof options === "undefined"){//if from unknown reason the query failed to run on load
  getSkills();//run the query again
   }else{//if the query on load ran as expected:
    $w('#eventTopic').options = options;
   }
  } else {
 //what to do if the selection is not "Work";
  }
 })
})
7

Thanks J.D!