[Bug] Button memory leak

[gubard]

Check the following items

• I have looked up relevant Issue

Description of the issue

I will create an application in the interface in which many buttons are used. While running the application, I noticed that every time the interface is updated, the amount of RAM required increases. After some research, I found that whenever the application needs to render a button, the necessary amount of memory increases. Also, I checked FluentTheme, it doesn't have similar behavior. I have created a repository with a project that reproduces this problem https://github.com/gubard/AvaloniaItemsControlMemoryLeak. Just run the project and press the start button.

Package Version

6.0.0-beta7

Environment

Windows 11 Pro 23H2 22631.3810 and Garuda Linux Bird of Prey x86_64

Expected Behavior

The amount of required RAM should not increase each time the button is rendered

Reproduction

Rendering the button and then clearing it. And so constantly

Additional Information

No response

[YJammak]

The memory leak is caused by the use of animation，There is a Loading inside the Button, and Loading uses animation. This should be a bug in Avalonia.

[JETomi]

I get the same issue when testing with borders.

        [ObservableProperty]
        ObservableCollection<Control> controls = new ObservableCollection<Control>();

        public MainViewModel()
        {
            System.Timers.Timer aTimer = new System.Timers.Timer();
            aTimer.Elapsed += new ElapsedEventHandler(OnTimedEvent);
            aTimer.Interval = 500;
            aTimer.Enabled = true;
        }
        private void OnTimedEvent(object source, ElapsedEventArgs e)
        {
            Dispatcher.UIThread.InvokeAsync(() => {
                Controls.Clear();
                for (int i = 0; i < 100; i++)
                {
                    //Controls.Add(new Button() { Content = "Button" });
                    Controls.Add(new Border() { Width = 100, Height = 100, Background = Brushes.Blue });
                }
            });
        }

[YJammak]

I get the same issue when testing with borders.

        [ObservableProperty]
        ObservableCollection<Control> controls = new ObservableCollection<Control>();

        public MainViewModel()
        {
            System.Timers.Timer aTimer = new System.Timers.Timer();
            aTimer.Elapsed += new ElapsedEventHandler(OnTimedEvent);
            aTimer.Interval = 500;
            aTimer.Enabled = true;
        }
        private void OnTimedEvent(object source, ElapsedEventArgs e)
        {
            Dispatcher.UIThread.InvokeAsync(() => {
                Controls.Clear();
                for (int i = 0; i < 100; i++)
                {
                    //Controls.Add(new Button() { Content = "Button" });
                    Controls.Add(new Border() { Width = 100, Height = 100, Background = Brushes.Blue });
                }
            });
        }

I don't know what control you use to display the Border list. It is possible that the control uses animation when displaying the Item.

[JETomi]

This is my XAML code.

<suki:SukiWindow xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:**.UI.Views"
             x:DataType="vm:MainViewModel"
				 xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
		mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="**.UI.Views.MainView"
        Icon="/Assets/avalonia-logo.ico"
        Title="**.UI">
	<Design.DataContext>
		<!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
		<vm:MainViewModel />
	</Design.DataContext>
	<StackPanel>
		<ItemsControl ItemsSource="{Binding Controls}"/>
	</StackPanel>
</suki:SukiWindow>

[JETomi]

I tried the same approach on a 'vanilla avalonia project' and the same issue exists.
So doesn't look like a theme specific problem.

[AuroraZiling]

Avalonia 11.1.3 with latest SukiUI CI dll

Testing reveals that the vanilla Avalonia project(repo in issue description) now does not suffer from memory leaks

[kikipoulet]

@AuroraZiling

Can we consider the issue fixed ?

[AuroraZiling]

This issue still exists (6.0.0-beta8)
With SukiUI:

With Fluent:

[kikipoulet]

@YJammak was completely right. It seems to be indeed the Loading :

With Loading :

Without Loading :

Fluent Theme :

Obviously the little difference between Suki and Fluent Theme is caused by the more complex tree + effect, but at least memory is cleaned correctly when there is no Loading. Let's investigate the Loading control then 👍

[kikipoulet]

The animation is 100% causing this.

<Style Selector="suki|Loading">
            <Style.Animations>
                <Animation FillMode="None"
                           IterationCount="Infinite"
                           PlaybackDirection="Normal"
                           Duration="0:0:1.5">
                    <Animation.Easing>
                        <QuadraticEaseInOut />
                    </Animation.Easing>
                    <KeyFrame Cue="0%">
                        <Setter Property="RotateTransform.Angle" Value="0" />
                    </KeyFrame>
                    <KeyFrame Cue="30%">
                        <Setter Property="RotateTransform.Angle" Value="0" />
                    </KeyFrame>

                    <KeyFrame Cue="100%">
                        <Setter Property="RotateTransform.Angle" Value="360" />
                    </KeyFrame>
                </Animation> 

            </Style.Animations>
   </Style>

Removing this infinite animation resolve the bug. So .. It seems to mean that using infinite animation trigger a memory leak. As this is a standard Avalonia use, I suppose we should raise an issue in the Avalonia repo.

Behavior in an empty avalonia project :

---

However, it is quite critical as a Loading control is embedded in every button. @sirdoombox, can you replace the Loading control by your LoadingTest ? I already tested it and it works like a charm an solve the bug, the only difficulty is to be able to set the foreground property and I don't want to make a mess in your "SukiEffect" code 🥲 there's no hurry though

[sirdoombox]

I should have some time to look into this tomorrow. It should be relatively easy to add some extra uniforms for setting colours, though I didn't mess around with that loading control much beyond just showing it was possible.

[sirdoombox]

Fixed in #297

(Tested with 1000 buttons, memory usage is flat)