LWC -- Javascript now fully loading before page Load

Question

I have 2 picklist values on a lightning web page. It's RNG if the picklists will have values or not sometimes Division will load, sometimes weatherloss will load and sometimes they both load but its too rng and needs to be consistent. not sure how to approach this

In the controller:

    @AuraEnabled  
    public static List<String> GetDivisionPicklist(){  
        List<String> pickListValuesList= new List<String>(); 
         Schema.DescribeFieldResult fieldResult = ATI_Job__c.Division__c.getDescribe();   
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();   
             for( Schema.PicklistEntry pickListVal : ple){  
                    pickListValuesList.add(pickListVal.getLabel());  
                }       
                return pickListValuesList;
            }
    @AuraEnabled  
    public static List<String> GetWeatherLossPicklist(){  
        List<String> pickListValuesList2= new List<String>(); 
         Schema.DescribeFieldResult fieldResult2 = ATI_Job__c.Weather_related_loss__c.getDescribe();   
        List<Schema.PicklistEntry> ple2 = fieldResult2.getPicklistValues();   
             for( Schema.PicklistEntry pickListVal : ple2){  
                        pickListValuesList2.add(pickListVal.getLabel());  
                    }    

In javascript:

    GetDivisionPicklist({}).then(result =>{
        var AccountRolePicklistValues = result;
        for(var i = 0; i<AccountRolePicklistValues.length;i++){
            
            this.DivisionPicklistValues.push({label : AccountRolePicklistValues[i], value : AccountRolePicklistValues[i], });
        }
        
        this.DivisionPicklistValues.shift();    
            this.PageStateReady = true; 

    })

    GetWeatherLossPicklist({}).then(result =>{
        var AccountRolePicklistValues = result;
        for(var i = 0; i<AccountRolePicklistValues.length;i++){
            
            this.WeatherLossPicklistValues.push({label : AccountRolePicklistValues[i], value : AccountRolePicklistValues[i], });
        }
        
        this.WeatherLossPicklistValues.shift();   
    })

I tried to swap the pagestateready logic to this and it seems better but if i click too quickly on the loaded page in the browser, the values won't load at all. if I wait a while then click it seems to load fine.

      GetDivisionPicklist({}).then(result =>{
        var AccountRolePicklistValues = result;
        for(var i = 0; i<AccountRolePicklistValues.length;i++){
            
            this.DivisionPicklistValues.push({label : AccountRolePicklistValues[i], value : AccountRolePicklistValues[i], });
        }
        
        this.DivisionPicklistValues.shift(); 
        if(this.Pagestatecheck2 ){   
            this.PageStateReady = true; 
        } else {
            this.Pagestatecheck2 = true;
        }
    })

    GetWeatherLossPicklist({}).then(result =>{
        var AccountRolePicklistValues = result;
        for(var i = 0; i<AccountRolePicklistValues.length;i++){
            
            this.WeatherLossPicklistValues.push({label : AccountRolePicklistValues[i], value : AccountRolePicklistValues[i], });
        }
        
        this.WeatherLossPicklistValues.shift();  
        if(this.Pagestatecheck2 = true){   
            this.PageStateReady = true; 
        } else {
            this.Pagestatecheck2 = true;
        } 
    })

Answer 1

A few things...

---

    if(this.Pagestatecheck2 = true){   

This will always be true, because = is assignment. Make sure you're using == or === for equality comparison.

---

You can, and probably should, use @wire methods here:

import { LightningElement, wire } from 'lwc'
import GetDivisionPicklist from '@salesforce/apex/MyClass.GetDivisionPicklist'
import GetWeatherLossPicklist from '@salesforce/apex/MyClass/GetWeatherLossPicklist'

export default class MyComponent extends LightningElement {
  divisionPicklistOptions = []
  weatherLossPicklistOptions = []
  @wire(GetDivisionPicklist,{}) divisionPicklistHandler({data,error}) {
    data && this.divisionPicklistOptions = data.map(label => ({ label, value: label }))
  }
  @wire(GetWeatherLossPicklist,{}) weatherLossPicklistHandler({data,error}) {
    data && this.weatherLossPicklistOptions = data.map(label => ({ label, value: label }))
  }
// rest of code
}

---

If you still need imperative calls, consider a better approach, like:

[this.DivisionPicklistValues, this.WeatherLossPicklistValues] = 
  await Promise.all([GetDivisionPicklist({}), GetWeatherLossPicklist({})]);

Where Promise.all waits for all methods to resolve, then you can return them in the same order.