[BUG] Unable to display Lottie Animation within Popup

[vhugogarcia]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I would like to display a Lottie animation within a popup, however, the animation is loaded only on iOS. Android and macOS do not load the Lottie Animation.

Android - The image is not rendered at all.
iOS - The image renders and animates properly.
macOS - The image renders without animation.

Please find below a couple of videos showing the issue

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

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

Expected Behavior

It is expected the Lottie animation to be rendered properly in all platforms within a popup.

Steps To Reproduce

1. Create a new MAUI project
2. Add CommunityToolkit.Maui nuget package
3. Add SkiaSharp.Extended.UI.Maui nuget package (preview)
4. Create a CommunityToolkit Popup view and add the following code:
   <skia:SKLottieView Source="loading.json" WidthRequest="200" HeightRequest="200" RepeatCount="-1" VerticalOptions="Center" HorizontalOptions="Center"/>
5. Use the following Lottie file as animation (Download the JSON file): https://lottiefiles.com/97952-loading-animation-blue
6. Include the json file into the folder /Resources/Raw
7. Mark the json file as build action > MauiAsset
8. Create a page with a button that shows the popup view on a click event

Link to public reproduction project repository

https://github.com/mono/SkiaSharp.Extended/files/9577812/SKLottieViewBug.zip

Environment

- .NET MAUI CommunityToolkit: 1.2.0
- OS:macOS Monterey 12.6
- .NET MAUI: 6.0.486
- SkiaSharp.Extended.UI.Maui 2.0.0-preview.61

Anything else?

Thanks in advance for this AMAZING library!

[brminnick]

Hey @vhugogarcia! We don't have any Lottie tooling in the .NET MAUI Community Toolkit.

Did you perhaps intent to open this Issue on the .NET MAUI repo or the SkiaSharp.Extended repo?

[bijington]

Hey @vhugogarcia! We don't have any Lottie tooling in the .NET MAUI Community Toolkit.

Did you perhaps intent to open this Issue on the .NET MAUI repo or the SkiaSharp.Extended repo?

I suggested he open it here. I don't know where the issue lies yet but for now the issue is that the Lottie animation render fine in a .NET MAUI app but not in the toolkits Popup.

[brminnick]

Thanks Shaun! Could we update the title of this Issue to include the problem? Currently, the title is just [Bug].

[VladislavAntonyuk]

And add a link to the repro to reproduce

[vhugogarcia]

Thanks Shaun! Could we update the title of this Issue to include the problem? Currently, the title is just [Bug].

Thanks @brminnick . I tried to update the title however, it did not let me do it. Maybe I did it wrong. I apologize.

@VladislavAntonyuk another person published this issue on the Skiasharp repository with a sample: mono/SkiaSharp.Extended#142

I think we are trying to guess if the popup has a limitation to render Skiasharp lottie animations natively or if there is something else involved into.

Thanks @bijington for also looking into.

Really appreciate the support from all of you.

[pictos]

We will wait until this issue get resolved:

• Lottie animation not visible on Page from ServiceProvider mono/SkiaSharp.Extended#147

[vhugogarcia]

@pictos @bijington I downloaded this repository https://github.com/mono/SkiaSharp.Extended/files/9577812/SKLottieViewBug.zip and I updated it to latest .NET MAUI version 7.0.52 and CommunityToolkit 3.1.0 and after some testing I can confirm a things:

• On Android, the SkiaSharp lottie animation is now animated as expected within the Popup, see video demo below:

Screen.Recording.2022-12-13.at.17.10.38.mov

• On iOS and macOS, the SkiaShap lottie animation is not animated anymore, it just renders the image in static mode, see video demo below:

Screen.Recording.2022-12-13.at.17.13.19.mov

I just wanted to share some findings using latest versions of .NET MAUI and Community Toolkit that could probably provide some insights about the issue. Please feel free to close this issue if you believe the current issue on iOS and macOS belongs to the issue you linked: mono/SkiaSharp.Extended#147

Thank you so much for reading me!

[pictos]

@vhugogarcia sorry for the late reply... I'll take a look on it soon-sh but I hope this can be fixed on the Skia side... Thank you so much for your time and evidences. Hope are having a great holiday season❣️

[VToegel]

For Info:
I got the lottieview to work on iOS when compiled on a MAC build host.
I commented my solution here:

mono/SkiaSharp.Extended#142 (comment)

Rgds Vinc

[vhugogarcia]

Thanks @VToegel for sharing this workaround. It solves the issue on Android, iOS and macOS successfully.

Tested on .NET MAUI version 7.0.52 and CommunityToolkit 3.1.0

Screen.Recording.2023-01-11.at.13.11.22.mov

I don't have a way to test it on Windows. If somebody can give me a hand to test it on Windows 11 would be awesome, please.

@pictos Up to this point, based on the workaround provided by our friend Vincent, I'm not sure if this issue now should still keep open on the community toolkit repo or SkiaSharp.Extended or even if we need to transfer this ticket to the .NET MAUI repository.

From my perspective, this issue can be closed here but I prefer for you Pedro or @brminnick to give us feedback on what will be the next steps on this issue.

THANK YOU to all people helping to solve this issue 💯

[VToegel]

@vhugogarcia I tested it on windows and it does work too.

Rgds Vinc

[bijington]

Sorry I got distracted and somehow forgot about this issue. Does anyone know what the status is? I see the issue on the skia repo is still open. @vhugogarcia has your workaround lived long enough to become a solution? 😄 Or is there something else we need to take action on?

[vhugogarcia]

Hello @bijington, please feel free to close it safely. It works very good now and I have used it on released apps in the stores for iOS and Android successfully 🥳.

Thank you so much for the support!

Update: I just closed it.

[bijington]

Excellent news! Thank you

[Elmigo]

Animation still stays hidden for me but only on the first time the Popup loads. When loading the second time it does show in the Popup. Also when using a CarouselView in the Popup, the animation stays hidden on the first slide. The second, third, etc. all show fine in the Popup. Anyone else had this happening?

[VToegel]

Lotties on popups still work with my workaround of async init:

mono/SkiaSharp.Extended#142 (comment)

The problem is the timing in lottie instantiation.
Please test.

Rgds