Show Lottie Animation during a process

Jassim Al Rahma 1,521

Hi,

I am trying below code and need to show Lottie Animation white muy code is running but the problem is it just hangs and the Lottie animation will only be show once the whole code is completed.

Here is my code;

async void ButtonPayNow_Clicked(System.Object sender, System.EventArgs e)
{
    ButtonPayNow.IsVisible = false;
    ScrollViewPay.IsVisible = false;

    LottiePay.PlayAnimation();
    LottiePay.IsVisible = true;

    HttpClient comes here....
}

Kindly help...

Thanks,
Jassim

Jassim Al Rahma 1,521 Reputation points

2021-09-07T21:44:29.04+00:00

I am not stopping the animation not setting isVisible of Lottie to false

Jassim Al Rahma 1,521

This is my full code:

async void ButtonPayNow_Clicked(System.Object sender, System.EventArgs e)
{
    ButtonPayNow.IsVisible = false;
    ScrollViewPay.IsVisible = false;

    LottiePay.PlayAnimation();
    LottiePay.IsVisible = true;

    --Run Stripe Payment code First
    --Run Stripe Payment code First
    --Run Stripe Payment code First

    if (charge.Status == "succeeded")
    {
        var client = new HttpClient();

        client.Timeout = TimeSpan.FromSeconds(App.HttpClient_TimeOut);
        client.BaseAddress = new Uri("https://www.domain.com/update.php");

        var content = new FormUrlEncodedContent(new[]
        {
            new KeyValuePair<string, string>("amount", "1.00"),
            new KeyValuePair<string, string>("description", "description"),
            new KeyValuePair<string, string>("user", "user")
        });

        var response = await client.PostAsync("https://www.domain.com/update.php", content);

        var result = await response.Content.ReadAsStringAsync();

        await DisplayAlert("succeeded", "Thank you", "Ok");
        await Navigation.PopModalAsync();
    }
    else
    {
        LottiePay.IsVisible = false;
        ScrollViewPay.IsVisible = true;
        ButtonPayNow.IsVisible = true;
    }
}

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Microsoft Vendor

Do you want to achieve the progressbar when you load the data? I test with my layout, I do not have Run Stripe Payment code First, So I add a task delay to test it

<ScrollView x:Name="ScrollViewPay">
            <StackLayout>
                <forms:AnimationView
                        x:Name="animationView"
                        Animation="LottieLogo1.json"
                        AnimationSource="AssetOrBundle"
                        WidthRequest="100"
                        HeightRequest="100"
                        RepeatCount="30"
                        RepeatMode="Restart"
                        AutoPlay="False"
                        IsVisible="False"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                />

            </StackLayout>
        </ScrollView>

        <Button Text="ss" Clicked="Button_Clicked"></Button>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Microsoft Vendor

Here is my background code. But the Lottie Animation worked as normal. when I click the ss button

public bool isStart = true;
        private async void Button_Clicked(object sender, EventArgs e)
        {
            animationView.PlayAnimation();
            animationView.IsVisible = true;
            await Task.Delay(2000);

            if (isStart)
            {

                await DisplayAlert("succeeded", "Thank you", "Ok");
                isStart = false;

            }
            else
            {

              //  animationView.PlayAnimation();

                animationView.IsVisible = false;
                isStart = true;
            }

          //  animationView.IsVisible = true;
        }

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2021-09-08T05:52:00.737+00:00

Could you share a demo about this issue? That I can reproduce it.