how to do a loading screen during an async await process in.net

[AlexMartin13]

Before everything forgive me for the bad english and the mistakes i'd could do in the code I'm just an student and I cannot find the solution to my problem, or I don't understand it, anywhere.

So, I have a Class, "ClienteService" where I load a List of Cliente.

namespace Pantalla_Cliente { class ClienteService { public async Task<List<Cliente>> GetClientesAsync() { string url = Program.rutaBase + Rutas.cliente; string response = await ApiClient.GetRequestAsync("GET", url, Program.token); List<Cliente> listClientes = JsonSerializer.Deserialize<List<Cliente>>(response); return listClientes; } } }

I have a form where I get the list and with the info I got I create "cards" with the info of the customer.
` private async void ObtenerClientes()
{
List listCliente = await clienteService.GetClientesAsync();
CrearPanelesClientes(listCliente);
}

    private void CrearPanelesClientes(List<Cliente> listaClientes)
    {

        foreach (Cliente cliente in listaClientes)
        { Console.WriteLine(cliente.ToString()); }

        int topPosition = 0;
        foreach (Cliente cliente in listaClientes)
        {
            ClienteBanner clienteBanner = new ClienteBanner();
            clienteBanner.getId().Text = cliente.id + "";
            clienteBanner.getNombre().Text = $"{cliente.nombre} {cliente.apellidos}";

            clienteBanner.getViewBtn().Click += (sender, e) =>
            {
                nombre.Text = cliente.nombre + " " + cliente.apellidos;
                correo.Text = cliente.nombreUsuario;
                id_mostrar.Text = cliente.id + "";
                nombre_mostrar.Text = cliente.nombre;
                apellidos_mostrar.Text = cliente.apellidos;
                email_mostrar.Text = cliente.nombreUsuario;
            };

            clienteBanner.Location = new Point(0, topPosition);
            topPosition += clienteBanner.Height + 30;
            clienteBanner.Show();
            panelClientes.Controls.Add(clienteBanner);
        }
    }`

The problem is that when I show the list, there's an small amount of time. less than 0.5s, so I want a loading screen for that time, because with 30 customers maybe is 0.2s, but if we get more customers, the time will increase.

I tried with a pictureBox making visible before " List listCliente = await clienteService.GetClientesAsync();" and after that making it invisible again. But it doesn't show the gif, the only way I can see the gif if I put a delay of 3s, but I dont want to put manually the time I want to wait

[tatoadsl]

My approach to this has been the following:

Using .NET MAUI Community Toolkit I have created a Popup with just an ActivityIndicator. Then just before the time consuming task I show the Popup and close it right after the the task has finished.

In the last release of .NET MAUI Community Toolkit it includes a service you can register within your DI container but I haven't use it because makes it hard to close the Popup outside the Popup itself, like with an undetermined time task.

[mihaimyh]

@tatoadsl Can you, please, provide an example? I guess your time consuming task is being executed on a background thread otherwise the ActivityIndicator will get freezed, am I correct?

[tatoadsl]

Hi @mihaimyh

It is kinda easy to make it work using a PopUp. Here is the call to the pop up and the long running task called once the popup has been shown:

var waitingPopup = new WaitingPopupView(); // Instantiate the popup
try
{
    this._popupService.ShowWaitingPopup(waitingPopup); // Show the popup using the popup service
    var response = await this._authService.LoginAsync(this.LoginData);  // The long running task
    // Do whatever you need with the response of the long running task
}
catch (Exception exception)
{
    // Process any exception
}
finally
{
    await waitingPopup.CloseAsync();  // Close the popup
}

I have created a PopupService to help show the popup. I haven't yet use the PopupService included in the .NET MAUI Community Toolkit that now allows to close the popup through the service.

public void ShowWaitingPopup(Popup popup)
{
    var page = Application.Current?.Windows[0].Page ?? throw new NullReferenceException();
    page.ShowPopup(popup);
}

and the Popup is defined like this:

<toolkit:Popup x:Class="Example.WaitingPopupView"
               xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               CanBeDismissedByTappingOutsideOfPopup="False"
               Color="Transparent">
    <Border Padding="10"
            BackgroundColor="#55000000"
            HeightRequest="110"
            MinimumWidthRequest="80"
            Stroke="#55000000"
            StrokeShape="RoundRectangle 10">
        <VerticalStackLayout Spacing="5">
            <ActivityIndicator HeightRequest="50"
                               HorizontalOptions="Fill"
                               IsRunning="True"
                               VerticalOptions="Fill"
                               WidthRequest="50"
                               Color="{StaticResource Tertiary}" />
            <Label x:Name="Message"
                   FontSize="18"
                   HorizontalOptions="Center"
                   HorizontalTextAlignment="Center"
                   LineBreakMode="WordWrap"
                   MaximumWidthRequest="300"
                   Text="Loading..."
                   TextColor="{StaticResource Tertiary}" />
        </VerticalStackLayout>
    </Border>
</toolkit:Popup>

It is working good for me, hope that the example is useful.

[asi-evin]

I have found the following library useful if you're app is mobile only:

https://github.com/Alex-Dobrynin/Controls.UserDialogs.Maui