[BUG] SKLottieView not working in Popup

[JosueSquareSix]

Description

SKLottieView is not working in Popup view from the CommunityToolkit.Maui 1.2.0

Code

<skia:SKLottieView
                RepeatCount="-1"
                WidthRequest="200"
                HeightRequest="200"
                Source="progress_loading.json"
                IsAnimationEnabled="True"/>

Expected Behavior

The animation should be visible or running.

Actual Behavior

SkLottieView isn't visible for Android SKLottieView isn't running on iOS, MacCatalyst, and Android

Basic Information

• Version with issue: SkiaSharp.Extended.UI.Maui - 2.0.0-preview.61
• Last known good version: Unknown
• IDE: Visual Studio for Mac 2022 Version 17.3.5
• Platform Target Frameworks:
  • Android: 11
  • iOS: 15.7
  • macOS: 12.6

Detailed IDE/OS information (click to expand)

``` Visual Studio Community 2022 for Mac Version 17.3.5 (build 0) Installation UUID: cd66cb3d-dc53-4393-8abb-1bd79b1ba968 Runtime .NET 6.0.5 (64-bit) Architecture: X64 Roslyn (Language Service) 4.3.0-3.22312.2+52adfb8b2dc71ed4278debcf13960f2116868608 NuGet Version: 6.2.1.2 .NET SDK (x64) SDK: /usr/local/share/dotnet/sdk/6.0.401/Sdks SDK Versions: 6.0.401 6.0.400 5.0.408 3.1.423 3.1.422 MSBuild SDKs: /Applications/Visual Studio.app/Contents/MonoBundle/MSBuild/Current/bin/Sdks .NET Runtime (x64) Runtime: /usr/local/share/dotnet/dotnet Runtime Versions: 6.0.9 6.0.8 5.0.17 3.1.29 3.1.28 Xamarin.Profiler Version: 1.8.0.19 Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler Updater Version: 11 Apple Developer Tools Xcode 13.4.1 (20504) Build 13F100 Xamarin.Mac Version: 8.12.0.2 (Visual Studio Community) Hash: 87f98a75e Branch: d17-3 Build date: 2022-07-25 20:18:54-0400 Xamarin.iOS Version: 15.12.0.2 (Visual Studio Community) Hash: 87f98a75e Branch: d17-3 Build date: 2022-07-25 20:18:55-0400 Xamarin Designer Version: 17.3.0.208 Hash: 0de472ea0 Branch: remotes/origin/d17-3 Build date: 2022-09-09 03:45:52 UTC Xamarin.Android Version: 13.0.0.0 (Visual Studio Community) Commit: xamarin-android/d17-3/030cd63 Android SDK: /Users/josuemanueldiasmayorga/Library/Android/sdk Supported Android versions: 8.0 (API level 26) 6.0 (API level 23) 12.0 (API level 31) 8.1 (API level 27) 5.1 (API level 22) 5.0 (API level 21) 11.0 (API level 30) 10.0 (API level 29) 7.1 (API level 25) 9.0 (API level 28) 7.0 (API level 24) SDK Command-line Tools Version: 7.0 SDK Platform Tools Version: 33.0.3 SDK Build Tools Version: 33.0.0 rc4 Build Information: Mono: dffa5ab Java.Interop: xamarin/java.interop/d17-3@7716ae53 SQLite: xamarin/sqlite/3.38.5@df4deab Xamarin.Android Tools: xamarin/xamarin-android-tools/main@14076a6 Microsoft Build of OpenJDK Java SDK: /Library/Java/JavaVirtualMachines/microsoft-11.jdk 11.0.12 Android Designer EPL code available here: https://github.com/xamarin/AndroidDesigner.EPL Eclipse Temurin JDK Java SDK: /Library/Java/JavaVirtualMachines/temurin-8.jdk 1.8.0.302 Android Designer EPL code available here: https://github.com/xamarin/AndroidDesigner.EPL Android SDK Manager Version: 17.3.0.23 Hash: 965bf40 Branch: remotes/origin/d17-3 Build date: 2022-09-09 03:45:57 UTC Android Device Manager Version: 0.0.0.1169 Hash: fafb1d5 Branch: fafb1d5 Build date: 2022-09-09 03:45:57 UTC Build Information Release ID: 1703050000 Git revision: ff0de72f31c7c2eccb19854fbaf050fa3f713a7c Build date: 2022-09-09 03:44:02+00 Build branch: release-17.3 Build lane: release-17.3 Operating System Mac OS X 12.6.0 Darwin 21.6.0 Darwin Kernel Version 21.6.0 Mon Aug 22 20:17:10 PDT 2022 root:xnu-8020.140.49~2/RELEASE_X86_64 x86_64 ```

Screenshots

Android https://user-images.githubusercontent.com/111379715/190478947-cc427617-1798-442e-ae77-73f1b0d0488e.mov

iOS https://user-images.githubusercontent.com/111379715/190477751-6a7d4488-52e3-4692-af6f-f2819fb4ff08.mov

MacCatalyst https://user-images.githubusercontent.com/111379715/190476385-7c4b8d02-aa43-415f-ba77-13035ff395e8.mov

Reproduction Link

SKLottieViewBug.zip

[johnwilson-wsh]

We are seeing similar behavior when adding a Lottie animation to a page that is navigated to, instead of the main page of the app. If we put the SKLottieView on the main page of the app, it works perfectly, but if we put the SKLottieView on a secondary page that is navigated to, it displays the first frame of the animation but does not animate.

[vhugogarcia]

That is true @johnwilson-wsh

On Android the animation is not being displayed, and macOS the image is displayed however it is not animated.

Please find below a few video samples for further information of the issue (macOS, Android and iOS):

https://user-images.githubusercontent.com/1047398/192578186-42f2f68f-9eef-4b61-b100-c474d796a32b.mp4

https://user-images.githubusercontent.com/1047398/192577984-7140ba2a-c787-4690-b365-5a6550ab8222.mov

https://user-images.githubusercontent.com/1047398/192578275-85e5b3b0-a60f-44a6-af8d-1d1e040b382d.mov

[VToegel]

Just for info, maybe it helps as a workaround:

I expirienced the same issue on iOS (SKLottieView loaded but did not play animation since it stopped before the first frame).

I solved the issue by using Async Initialization with a short delay, after which the LottieAnimation IsAnimationEnabled property is set to true (set to false in XAML). See code example below

public PopupView()
{
    InitializeComponent();

    // initialize this `InitializeLottieAsync()`
    Initialization = InitializeLottieAsync();
}

public Task Initialization { get; private set; }

public async Task InitializeLottieAsync()
{
    await Task.Delay(50);
    LottieAnimation.IsAnimationEnabled = true;
}

[HugoPeters]

This is still an issue for me despite @VToegel's workaround - when I launch a popup from anywhere but a page itself animations usually don't work, with the workaround it seems they have a higher chance of working but still don't sometimes. For context, this is using shell and ModalAnimated / FormSheet presentation style. Invoking on main thread doesn't make a difference. I didn't look much into it but enabling debug statistics shows 0 FPS on those animations.

[mavispuford]

We are also experiencing this outside of popup situations. We've got a loading spinner set up in a ControlTemplate for our pages, and IsAnimationEnabled is bound using a TemplateBinding to an IsBusy bool on our view models. We assume a VM is busy until it finishes being initialized, so IsBusy is defaulted to true. This causes the animation to not play. Similar to VToegal's workaround, I can get it working by defaulting IsBusy to false and setting it to true after a small delay.

[gabsamples6]

It would be nice to have this fixed , even with the workround using mopups does not work @VToegel do you have a noddy sample with a pop up that works? I cannot make it work I am using https://github.com/LuckyDucko/Mopups thanks

[VToegel]

@gabsamples6 i could only provide an example for Maui community toolkit popup. There the workaround works for sure.

I am unfortunately not using mopups for the time being.

Rgds Vinc

[gabsamples6]

@VToegel thanks for replying , I will revert to mauiCommunity toolkit for the popup (its bottom one) if this is not going to be fixed. So if you have anything that you can show because I cannot make it work

thanks again

[VToegel]

@gabsamples6 Please find an example here:

https://github.com/VToegel/MauiLottiePopupExample.git

Works for me on windows, android and iOS. Please also read through the readme for some tips.

Reds Vinc

[gabsamples6]

@VToegel brilliant!! thank you!

[AntPolkanov]

Came across this timing issue too when tried to display an animation in a CarouselView. Does anyone have an idea how to properly fix it? Checked the source code, but cannot see anything obvious.

[mattleibow]

Looking closer, this appears to be the case because the MCT is not causing the Loaded event to fire

[kyurkchyan]

We have a custom view that we use a loading view inside all of the screens. Here's how the view looks roughly

<Grid
    RowDefinitions="*,Auto,Auto,*"
    x:Name="This"
    IsVisible="{Binding IsBusy, Source={x:Reference  This}}"
    HorizontalOptions="Fill"
    VerticalOptions="Fill"
    RowSpacing="0">
    <controls:Placeholder
        IsBusy="{Binding IsBusy, Source={x:Reference  This}}"
        Aspect="AspectFit"
        Width="300"
        HorizontalOptions="Center"
        VerticalOptions="Fill" />
    <skia:SKLottieView
        Grid.Row="1"
        Source="loading_indicator.json"
        RepeatCount="-1"
        HeightRequest="32"
        WidthRequest="55"
        HorizontalOptions="Center" />
    <Label
        Grid.Row="2"
        Text="{markupExtensions:Translate Loading}"
        Style="{StaticResource MetadataLabelStyle}"
        FontSize="{StaticResource LargeFontSize}"
        Margin="8"
        HorizontalTextAlignment="Center" />
    <progress:ProgressBar
        Grid.Row="3"
        IsVisible="{Binding Progress, Converter={StaticResource IsNotNullConverter}, Source={x:Reference This}}"
        Progress="{Binding Progress, Source={x:Reference This}}"
        HeightRequest="8"
        ProgressColor="{StaticResource AccentColor}"
        HorizontalOptions="Fill"
        VerticalOptions="End" />
</Grid>

This view gets shown and hidden whenever the screen has an active loading process. The behavior we observe is that the animation doesn't work in the first screen, the first time the Lottie view is shown, the animation doesn't work. However, it works on the screens that come after. I tried adding the artificial delay workaround mentioned above, but it didn't help.

[Elmigo]

Just for info, maybe it helps as a workaround:

I expirienced the same issue on iOS (SKLottieView loaded but did not play animation since it stopped before the first frame).

I solved the issue by using Async Initialization with a short delay, after which the LottieAnimation IsAnimationEnabled property is set to true (set to false in XAML). See code example below

public PopupView()
{
    InitializeComponent();

    // initialize this `InitializeLottieAsync()`
    Initialization = InitializeLottieAsync();
}

public Task Initialization { get; private set; }

public async Task InitializeLottieAsync()
{
    await Task.Delay(50);
    LottieAnimation.IsAnimationEnabled = true;
}

How does this work using MVVM? I cannot get it to work for Lottie used in CarouselView items. Changing the binding to the IsAnimationPlaying attribute using Task.Delay does not seem to do anything. The first slide never shows on Android but the second, third, etc. work fine.

[VToegel]

I bind the lottiesource from the viewmodel, but IsAnimationEnabled is always set from code behind.

But basically it should also work using a binding. I think its a timing issue and the question is if your viewmodel or the view is instantiated first. You can check that by setting breakpoints in viewmodel and view. Next you can try a ridiculous high delay (e.g. 5000ms) and see if the animation starts. If yes then you do need to play with your architecture or delay to solve the issue.