API communication from ViewModels

When navigating to the RecipeDetailPage, you’ll see some data on the screen while the recipe is being loaded. The data being shown is the values defined as FallbackValue or TargetNullValue in the binding statements as a result of the data in RecipeDetailViewModel not being loaded yet. Although effective, I don’t think it looks pretty. Let’s see how we can improve this by showing a loading indicator while the data is being loaded.

Showing a loading indicator

One of the simplest yet effective ways to improve user experience is to provide visual feedback during API calls. Consider the following code snippet:

private bool _isLoading = true;
public bool IsLoading
{
    get => _isLoading;
    set => SetProperty(ref _isLoading, value);
}
private async Task LoadRecipe(string recipeId)
{
    IsLoading = true;
...
    await Task.WhenAll(loadRecipeTask...