I have 2 picklist(Combo-box). On change of value in the 1st combobox - depending on the value returned from the controller - i need to render or hide the 2nd combobox. I'm using refreshapex to get the latest values from controller. After refreshapex i'm trying to get the list length. As JS is asynchronous it is not waiting till the list is populated with the fresh values. Need help in implementing Call-back function so that i get the latest count of the list which will help in deciding whether i should render or not the 2nd combobox.

@wire(fetchL2ProductValues,{productId: '$l1SavedValue',userType: '$userType'})
l2ProductList;

get l2ProductOptions(){
  return this.l2ProductList.data;
}
onSelectProductL1(event){
  this.l1SavedValue = event.target.value;
  refreshApex(this.l2ProductList);
  
  /*following below lines of code need to be executed only after l2ProductList values has refreshed. As now since call-back is not implemented(asynchronus), it is getting executed immediately after refreshAPex & it is holding the previous value of this.l2ProductList rather than the latest value fetched from apex */
    var key,count =0;
    for(key in this.l2ProductList){
        if(this.l2ProductList.hasOwnProperty(key)){
            count++;
        }
    }
    console.log('count is :'+count);
    if(count > 0){
        this.showProductL2 = true;
    }else{
        console.log('In else condition');
        this.showProductL2 = false;
    }