Lottie animation does not behave as expected inside CollectionView.EmptyView

[AlbertoBvsso]

Description

Lottie animation (from SkiaSharp) does not behave as intended. I've place it inside the emtpy view of a colletion view, but when the collection is empty and as such, the animation should be visible, it's not. But if i cut and repaste the animation XAML code, while the code is still running, the animation now displays correctly. I've posted a question on stackoverflow -> https://stackoverflow.com/questions/76828839/lottie-animation-using-skiasharp-does-not-display-inside-collectionview-empyvi

2023-08-07-15-45-21.mp4

Steps to Reproduce

1. Create MAUI project and install the necessary NuGet packets (https://www.nuget.org/packages/SkiaSharp.Extended.UI.Maui/2.0.0-preview.59?_src=template
2. Make that when the collection view is empty, the lottie is displayed
3. Run application

Link to public reproduction project repository

No response

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows, I was not able test on other platforms

Affected platform versions

Android 9, Android 13, Windows 10 PRO

Did you find any workaround?

The workaround is to add the lottie animation programmatically as such

private void CollectionView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    //{
    //    if (filterStatesViewModel.States.Count == 0)
    //    {
    //        emptyViewGrid.Clear();
    //        SKLottieView myanimatedview = new SKLottieView();
    //        var a = new SKFileLottieImageSource();
    //        a.File = "earthanimation.json";
    //        myanimatedview.WidthRequest = 300;
    //        myanimatedview.HeightRequest = 300;
    //        myanimatedview.Source = a;
    //        myanimatedview.RepeatCount = -1;
    //        emptyViewGrid.Add(myanimatedview);
    //        Label label = new Label()
    //        {
    //            Text = "NOT FOUND",
    //            TextColor = Colors.LightBlue,
    //            VerticalOptions = LayoutOptions.CenterAndExpand,
    //            HorizontalOptions = LayoutOptions.CenterAndExpand
    //        };
    //        emptyViewGrid.Add(label);
    //    }

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[vikher]

Even if this issue has been added to the backlog for CollectionView, is there a plan to address it for the CarouselView as well?

Screen-Recording-2023-09-19-at-3.mp4

Description:

When using SKLottieView within a CarouselView on both Android and iOS platforms, we are encountering several issues:

Android:

The animations are not playing consistently when cycling through the views in the CarouselView.
All Lottie files seem to be loaded at once.

iOS:

The first Lottie file doesn't load correctly.
When scrolling left in the CarouselView, it sometimes breaks the animation.
Animation behavior is inconsistent compared to Android, where animations do not play every time you scroll.

Basic Information:

Package Version with the issue: "SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.83"
Last known good version: Unknown
IDE: Visual Studio for Mac 2022
Platform Target Frameworks: Android and iOS

Steps to Reproduce:

Create a Xamarin MAUI application.
Add a CarouselView to a page.
Use SKLottieView within the CarouselView.ItemTemplate.
Bind SKLottieView properties such as Source to Lottie animation files.
Populate the CarouselView with multiple items containing SKLottieView elements.
Run the application on both Android and iOS devices.
Observe the described issues during the carousel scrolling and animation playback.

Expected Behavior:

We expect the SKLottieView animations to play consistently on both Android and iOS platforms as the user scrolls through the CarouselView. The animations should load correctly, and there should be no noticeable issues with animation playback.

It has come to our attention that this issue has been open for a year now. We would like to inquire whether it has already been added to the backlog. We look forward to your support in resolving these issues promptly.

Code snippet:

        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="viewModels:FlashCardViewModel" >
                <Grid   RowDefinitions="60*,40*"
                        ColumnDefinitions="*" 
                        ColumnSpacing="0"
                        HorizontalOptions="Fill"
                        RowSpacing="0"
                        VerticalOptions="Fill">
                    <VerticalStackLayout
                            Grid.Row="0"
                            Grid.Column="0"
                            HeightRequest="440"
                            WidthRequest="440" >
                        <skia:SKLottieView
                            x:Name="LottieAnimationView"
                            HorizontalOptions="Center"
                            BackgroundColor="{Binding AnimationBackgroundColor}"
                            Source="{Binding AnimationFileName}"
                            RepeatCount="0"
                            HeightRequest="440"
                            WidthRequest="440" />
                    </VerticalStackLayout>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

[jbtdevgit]

This does not work as well inside a VerticalStacklayout inside a ContentView
Version: SkiaSharp.Extended.UI.Maui 2.0.0-preview.61

<VerticalStackLayout IsVisible="{Binding IsEmpty}" Grid.Row="0" Grid.RowSpan="2"  HorizontalOptions="Center" VerticalOptions="Center" Spacing="20">
            <skia:SKLottieView Source="empty.json"
                               RepeatCount="-1"
                               HeightRequest="200"
                               WidthRequest="200"/>
            <controls:EmptyAddButton Command="{Binding AddCommand}" WidthRequest="150"/>
</VerticalStackLayout>

[BrandanN21]

Does anyone currently know of a work around for this? I'm using a carousel view within MAUI.

[ghost]

Hi @AlbertoBvsso. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.