Referencing multiple loading components and closing individual loaders

[amthekkel]

I have a page , on the created hook, I am calling multiple methods that call relevant APIs. These methods can be called independently as well by other parts of the code Within each API call, i have the loading notification before the API call which closes once the response is returned.

methods:{
 get_users(){
    this.$vs.loading();
    //make API call 
   //close Loader after response
    this.$vs.loading.close();
 },
 get_departments(){
    this.$vs.loading();
    //make API call 
   //close Loader after response
    this.$vs.loading.close();
 } 
},
created(){
 this.get_users();
 this.get_departments();
}

-- lets say get_users API take 5 secs to return while get_departments API returns 1 sec. Problem: The loader closes as soon as the get_department API response returns. Expected: Loader for get_users continues to show until the response for get_users returns

Is there a way to achieve the above

suggestion (if no solution currently exists): allow adding identifiers to loaders so they can be closed individually. e.g

this.$vs.loading("get_user_loader"); and this.$vs.loading("get_department_loader");

then in the API response the loaders can be closed as this.$vs.loading("get_user_loader").close(); and this.$vs.loading("get_department_loader").close();