How do I ensure Xamarin/MAUI ViewModel data has loaded before the UI attempts to consume it?

In my application, I request a collection of vehicles back from a REST API and store them to a property. This is done using an async task. My page consumes this with a picker which binds to this observable collection. Currently when the page loads, depending on how quickly it is used, the picker has not populated yet. This resolves it's self by waiting for a second and re-opening the picker.

My assumption is that the task has not finished and it running async means the UI has continued without it. However I couldn't say for certain because I'm not sure how I could test its value at time of UI load.

I would like to know what measures I can take to ensure that the user will not experience this type of data not loading.

Simplied View Model

    internal class BaseVehicleViewModel : BaseViewModel
    {
        public BaseVehicleViewModel()
        {
            Task.Run(async () => await GetAssets()).ConfigureAwait(false);

        }

        protected ObservableCollection<Asset> vehicles;

        public ObservableCollection<Asset> Vehicles
        {
            get => vehicles;
            set => SetProperty(ref vehicles, value);
        }

        protected async Task GetAssets()
        {
            var vehicles = await App.AppServiceClient.AssetsAsync();
            if (vehicles != null)
            {
                Vehicles =
                    new ObservableCollection<Asset>(vehicles.Where(v => v.Active == 1));
            }
        }

Simplified View

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Views.Page"
             xmlns:vm="clr-namespace:App.ViewModels">

    <ContentPage.BindingContext>
        <vm:ViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Picker Title="Select a vehicle"
                ItemsSource="{Binding Vehicles}"
                ItemDisplayBinding="{Binding Reg}"
                SelectedItem="{Binding SelectedVehicle, Mode=TwoWay}"/>
    </ContentPage.Content>
</ContentPage>

> My assumption is that the task has not finished and it running async means the UI has continued without it.

That is correct; the code currently executes the loading as a fire-and-forget method. Fire-and-forget has several problems: one is that it's not easy/possible to detect when it's complete; another is that (in this case) exceptions are ignored.

> I would like to know what measures I can take to ensure that the user will not experience this type of data not loading.

The user will always experience the data loading in some way. I recommend that you design a "loading" state for your page.

I do not recommend blocking on the asynchronous work. This will block the UI thread, providing a very poor user experience. The user will just see a noninteractive blank/empty screen, and the OS will treat the app as not responsive. If this is a mobile app, that's even worse, since you've made the entire screen unresponsive just with your one app; some app stores will automatically test for this behavior and reject your app if it does this kind of thing.

Instead of blocking or fire-and-forget, you need to design UX to handle the asynchronous nature of your code. This usually means synchronously and immediately initializing to a "loading" state, and then later updating the UI with the results (or an error message).

I have an old article that goes into more detail and suggests a type that acts like a data-bindable Task<T>. This idea has been copied into several libraries:

• NotifyTask<T> in Nito.Mvvm.Async, my original implementation.
• MvxNotifyTask<TResult> in MvvmCross.
• ObservableObject.TaskNotifier in the .NET Community Toolkit / MVVM Toolkit v7.
• NotifyTaskCompletion<T> in the .NET Community Toolkit / MVVM Toolkit v6.

The general usage of most of them are the same, with minor API differences. E.g., using NotifyTask<T>:

public BaseVehicleViewModel()
{
  Vehicles = NotifyTask.Create(async () => await GetAssetsAsync());
}

public NotifyTask<ObservableCollection<Asset>> Vehicles { get; }

protected async Task<ObservableCollection<Asset>> GetAssetsAsync()
{
  var vehicles = await App.AppServiceClient.AssetsAsync();
  if (vehicles == null)
    return new ObservableCollection<Asset>();
  return new ObservableCollection<Asset>(vehicles.Where(v => v.Active == 1));
}

Now your Vehicles is a NotifyTask<ObservableCollection<Asset>> instead of a ObservableCollection<Asset>. Your data binding code can bind to Vehicles.Result to bind to the ObservableCollection<Asset> (which is null until the assets are loaded). It can also bind to Vehicles.IsNotCompleted to show a spinner/skeleton instead of the full UI, Vehicles.ErrorMessage if the loading failed, etc.

First of all, you can try to make the async method run synchronously. Such as:

public BaseVehicleViewModel()
{
   var task = Task.Run(async () => await GetAssets()).ConfigureAwait(false);
   task.Wait();
   // GetAssets().GetAwaiter().GetResult();
   // Task.Run(() => GetAssets().Wait());
}

In addition, you can also use the EventToCommand to convert the Page's OnAppearing event to the command in the viewmodel.

And you can declare a flag in the ViewModel to check if the data has been loaded or not. Such as:

 internal class BaseVehicleViewModel : BaseViewModel
    {
        public bool finished = false;
        public BaseVehicleViewModel()
        {
           Task.Run(async () => await GetAssets()).ContinueWith(t=> { finished=true;});
           // when the task compete the finished flag will be set as true;
        }
        protected ObservableCollection<Asset> vehicles;
        public ObservableCollection<Asset> Vehicles
        {
            get => vehicles;
            set => SetProperty(ref vehicles, value);
        }

        protected async Task GetAssets()
        {
            var vehicles = await App.AppServiceClient.AssetsAsync();
            if (vehicles != null)
            {
                Vehicles =
                    new ObservableCollection<Asset>(vehicles.Where(v => v.Active == 1));
            }
        }

Finally, you can refer to this case about when to load the ViewModel for asynchronous data in a Xamarin Android app.