Lottie animation not visible on Page from ServiceProvider

[PureWeen]

Description

When Page with Lottie animation is created from ServiceProvider, then Lottie animation is not visible

Steps to Reproduce

In file App.xaml.cs there are two examples. One i working fine. Second not

Link to public reproduction project repository

https://github.com/MarMarIV/MauiLottieApp

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

Any version

Did you find any workaround?

Unfortunately, no

Relevant log output

No response

[MarMarIV]

Is there any progress of this bug?

[Syed-RI]

bump @mattleibow

[Syed-RI]

Any workaround anyone?

[Syed-RI]

Sadly, moved back to ActivityIndicator

[alextorres50]

any update? @PureWeen Any alternative solution? @jfversluis

[Syed-RI]

bump @mattleibow

[gabsamples6]

@mattleibow is lottie still supported in maui? it does not work in ios at all

[MarMarIV]

I originally started this issue, so I'll include a possible workaround:

Copy these listed resources and paste them into your app. Rendering should start working

https://github.com/mono/SkiaSharp.Extended/blob/0ff98b0080b043e7e12aff3912f496f708acfd25/source/SkiaSharp.Extended.UI.Maui/Controls/Lottie/SKLottieViewResources.shared.xaml#L7C1-L20C59

[Syed-RI]

Ok but is there an explanation as to why this would work? PS Im yet to try the solution myself

[gabsamples6]

@MarMarIV copy to any resource dictionary at startup ?

[mattleibow]

I had a look at this and I think I see what is happening. The lottie view uses some styles that are in the class library. Typically if you add the control to a page that is not from the services, the view will register the styles it needs before it is constructed, so it can access them.

However, if the page comes from the services as in this issue, then the page and the lottie view is constructed before the app has completed construction - because it is part of the construction.

A workaround is to include the themes and styles yourself in your App.xaml:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiLottieApp"
             xmlns:themes="clr-namespace:SkiaSharp.Extended.UI.Controls.Themes;assembly=SkiaSharp.Extended.UI"
             x:Class="MauiLottieApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- ... existing styles ... -->
                <themes:SKLottieViewResources /> <!-- this is the new style from the library -->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

This is actually a manifestation of dotnet/maui#9612. I have to try and find a good place to add the themes, but it is not great.

[mattleibow]

I think I have a workaround for now. I can detect when the Window changes and at that point the app is ready and the control is not yet styled. If I register my themes then it works again.

[Syed-RI]

woowhooo! 🎉

@mattleibow thanks a lot for your hard work! Does 2.0.0-preview.70 contains this workaround?