[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):

Community.Toolkit.Popup.-.Lottie.Animation.-.macOS.mp4

Android.Emulator.-.Community.Toolkit.-.Lottie.mov

Community.Toolkit.Popups.and.Lottie.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.