Show Lottie Animation during a process

Question

Show Lottie Animation during a process

Jassim Al Rahma 1,391

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,391 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,391

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.) 47,446 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.) 47,446 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.) 47,446 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.

Jassim Al Rahma 1,391 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,391 Reputation points

2021-09-07T21:54:24.1+00:00

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.) 47,446 Reputation points Microsoft Vendor

2021-09-08T05:49:47.737+00:00

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.) 47,446 Reputation points Microsoft Vendor

2021-09-08T05:51:22.717+00:00

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.) 47,446 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.

Show Lottie Animation during a process

Activity