Application freezing when first loading a user control

[ssaxel03]

Describe the bug

In my application there's the window with a side menu and a main content page. This main content page loads various UserControls using a ContentControl.

Currently this content control loads a specific user control when the application first loads, but when I click on a button to change to another user control the application freezes for about half a second and then shows me desired user control. When I then try to change user controls again they load fine, it only happens the first time.

I've tried to instantiate all user controls on startup so they don't have to be created on demand but it doesn't seem to make a difference.

I wonder how can I fix this performance issue to enhance my application user experience.

Here are some code snippets from the project I am currently developing:

Main Window:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:desktop_manager.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="desktop_manager.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="desktop_manager"
        Background="#F6F6F6"
        MinHeight="480"
        MinWidth="840"
        Focusable="True">

    <Grid RowDefinitions="Auto, *">
        
        <Grid Grid.Row="0" 
            Background="#B00">
            <TextPresenter Margin="5" 
                           VerticalAlignment="Center" 
                           HorizontalAlignment="Center" 
                           Foreground="#F6F6F6" 
                           FontSize="24">
                Balaio - Construção Civil
            </TextPresenter>
        </Grid>
        
        <Grid Grid.Row="1" 
              ColumnDefinitions="*, 6*">
            
            <StackPanel Grid.Column="0" 
                        Orientation="Vertical"
                        Background="#C6C6C6">
                
                <StackPanel.Styles>
                    <Style Selector="Button">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
                        <Setter Property="Margin" Value="0"></Setter>
                        <Setter Property="CornerRadius" Value="0"></Setter>
                        <Setter Property="BorderThickness" Value="0"></Setter>
                    </Style>
                    <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                        <Setter Property="Background" Value="#B00" />
                        <Setter Property="Foreground" Value="#E6E6E6" />
                    </Style>
                    <Style Selector="Button:pressed  /template/ ContentPresenter#PART_ContentPresenter">
                        <Setter Property="Background" Value="#A00" />
                        <Setter Property="Foreground" Value="#E6E6E6" />
                    </Style>
                    <Style Selector="Button:pressed">
                        <Setter Property="RenderTransform" Value="scale(1)" />
                    </Style>
                </StackPanel.Styles>
                
                <Button Content="My Company"
                        Click="CompanyDetailsButton_Click"
                        HorizontalAlignment="Stretch"/>
                <Button Content="Preferences" 
                        HorizontalAlignment="Stretch"/>
                <Button Content="New Quote" 
                        Click="NewQuoteButton_Click" 
                        HorizontalAlignment="Stretch"/>
                <!-- Add more buttons as ye see fit -->
            </StackPanel>
        
            <ContentControl Grid.Column="1" 
                            Name="MainContentControl" 
                            Margin="5">
            
            </ContentControl>
            
        </Grid>
        
    </Grid>
    
        
</Window>

The UserControl that's lagging:

<UserControl 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:desktop_manager.ViewModels"
             xmlns:utility="clr-namespace:desktop_manager.Utility"
             mc:Ignorable="d"
             x:Class="desktop_manager.Views.NewQuote"
             x:DataType="vm:NewQuoteViewModel">
    
    
        
        <Grid RowDefinitions="Auto, Auto, Auto" 
              ColumnDefinitions="*">
            
            <Grid Grid.Row="0" 
                  RowDefinitions="Auto, Auto, Auto, Auto, Auto" 
                  ColumnDefinitions="2*, 2*, *, *, *"
                  Margin="0, 0, 0, 5">
                
                <Grid.Styles>
                    <!-- LABEL STYLES -->
                    <Style Selector="Label">
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    
                    <Style Selector="Label /template/ ContentPresenter">
                        <Setter Property="TextWrapping" Value="Wrap"></Setter>
                    </Style>
                    <!-- CHECKBOX STYLES -->
                    <Style Selector="CheckBox:unchecked /template/ Border#NormalRectangle">
                        <Setter Property="BorderThickness" Value="0"></Setter>
                        <Setter Property="Background" Value="#E6E6E6"></Setter>
                    </Style>
                    <Style Selector="CheckBox:pointerover /template/ Border#NormalRectangle">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                    </Style>
                    <Style Selector="CheckBox:checked /template/ Border#NormalRectangle">
                        <Setter Property="BorderThickness" Value="0"></Setter>
                        <Setter Property="Background" Value="#B00"></Setter>
                    </Style>
                    <Style Selector="CheckBox /template/ ContentPresenter">
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="CheckBox:pointerover /template/ ContentPresenter">
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <!-- TEXTBOX STYLES -->
                    <Style Selector="TextBox">
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="Background" Value="#E6E6E6"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                        <Setter Property="CaretBrush" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover">
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover /template/ TextBlock#PART_Watermark">
                        <Setter Property="Foreground" Value="#181818" />
                    </Style>
                    <Style Selector="TextBox:focus">
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                        <Setter Property="BorderBrush" Value="#B00"></Setter>
                    </Style>
                    <Style Selector="TextBox:focus /template/ TextBlock#PART_Watermark">
                        <Setter Property="Foreground" Value="#181818" />
                    </Style>
                </Grid.Styles>
            
                <Label Grid.Row="0" 
                       Grid.Column="0"
                       FontWeight="Bold"
                       Margin="0, 0, 0, 5">
                    Client
                </Label>
                
                <Label Grid.Row="1" Grid.Column="0" 
                       Foreground="#181818" 
                       Margin="0, 0, 0, 1">
                        Name
                </Label>
                
                <TextBox Grid.Row="2" Grid.Column="0" 
                         Text="{Binding ClientName}"
                         Margin="0, 0, 0, 2"/>
            
                
                <Label Grid.Row="3" Grid.Column="0" 
                       Foreground="#181818" 
                       Margin="0, 0, 0, 1">
                        Address
                </Label>
                <TextBox Grid.Row="4" Grid.Column="0"
                         Text="{Binding ClientAddress}"
                         Margin="0, 0, 0, 2"/>
                
            
                <Label Grid.Row="0" 
                       Grid.Column="1"
                       FontWeight="Bold"
                       Margin="5, 0, 0, 5">
                    Document
                </Label>
                
                <Label Grid.Row="1" Grid.Column="1" 
                       Foreground="#181818"
                       Margin="5, 0, 0, 1">
                        Subject
                </Label>
                <TextBox Grid.Row="2" Grid.Column="1" 
                         Text="{Binding Subject}"
                         Margin="5, 0, 0, 2"/>
                
                <Label Grid.Row="1" Grid.Column="2" 
                       Foreground="#181818"
                       Margin="5, 0, 0, 1">
                    Serial #
                </Label>
                <TextBox Grid.Row="2" Grid.Column="2" 
                         Text=""
                         Margin="5, 0, 0, 2"/>
                
                <Label Grid.Row="1" Grid.Column="3" 
                       Foreground="#181818"
                       Margin="5, 0, 0, 1">
                    Profit %
                </Label>
                <TextBox Grid.Row="2" Grid.Column="3" 
                         Text=""
                         Margin="5, 0, 0, 2"/>
                
                <Label Grid.Row="1" Grid.Column="4" 
                       Foreground="#181818"
                       Margin="5, 0, 0, 1">
                    Upfront %
                </Label>
                <TextBox Grid.Row="2" Grid.Column="4" 
                         Text=""
                         Margin="5, 0, 0, 2"/>
                
                <Label Grid.Row="3" Grid.Column="1" 
                       Foreground="#181818"
                       Margin="5, 0, 0, 1">
                    Options
                </Label>
                <StackPanel VerticalAlignment="Center"
                            Spacing="5" 
                            Grid.Row="4"
                            Grid.Column="1" 
                            Grid.ColumnSpan="4"
                            Orientation="Horizontal"
                            Margin="5, 0, 0, 0">
                    <CheckBox IsChecked="True">Global value</CheckBox>
                    <CheckBox IsChecked="True">Detailed values</CheckBox>
                    <CheckBox IsChecked="{Binding IsCondominium}">Condominium</CheckBox>
                    <CheckBox>Autos</CheckBox>
                    <CheckBox IsChecked="{Binding Vat}">VAT</CheckBox>
                </StackPanel>
            
            </Grid>
            
            <DataGrid Grid.Row="1" 
                      x:Name="ItemsDataGrid"
                      ItemsSource="{Binding Items}" 
                      SelectedItem="{Binding SelectedItem}"
                      AutoGenerateColumns="False" 
                      CanUserSortColumns="False"
                      ColumnWidth="2*"
                      CellEditEnded="SortItems"
                      Margin="0, 0, 0, 5">
                
                <DataGrid.Resources>
                    <utility:CurrencyConverter 
                        x:Key="CurrencyConverter"/>
                    <utility:QuantityConverter 
                        x:Key="QuantityConverter" />
                </DataGrid.Resources>
                
                <DataGrid.Styles>
                    <!-- Style for the DataGrid -->
                    <Style Selector="DataGrid">
                        <Setter Property="Background" Value="#E6E6E6"/>
                        <Setter Property="Foreground" Value="#181818"/>
                        <Setter Property="FontSize" Value="14"></Setter>
                    </Style>

                    <!-- Style for the DataGrid Headers -->
                    <Style Selector="DataGridColumnHeader">
                        <Setter Property="Background" Value="#B00"/>
                        <Setter Property="Foreground" Value="#E6E6E6"/>
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
                        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
                        <Setter Property="AreSeparatorsVisible" Value="False"></Setter>
                        <Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow"></Setter>
                        <Setter Property="Padding" Value="1, 0"></Setter>
                        <Setter Property="Margin" Value="0"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridColumnHeader:pointerover /template/ Grid#PART_ColumnHeaderRoot">
                        <Setter Property="Background" Value="#B00"/>
                    </Style>
                    
                    <Style Selector="DataGridColumnHeader:pressed /template/ Grid#PART_ColumnHeaderRoot">
                        <Setter Property="Background" Value="#B00"/>
                    </Style>

                    <!-- Style for the hovered row -->
                    <Style Selector="DataGridRow:pointerover">
                        <Setter Property="Background" Value="#C6C6C6"/>
                        <Setter Property="Foreground" Value="#181818"/>
                        <Setter Property="FontSize" Value="14"></Setter>
                    </Style>

                    <!-- Style for the DataGridRow -->
                    <Style Selector="DataGridRow">
                        <Setter Property="Background" Value="#E6E6E6"/>
                        <Setter Property="Foreground" Value="#181818"/>
                        <Setter Property="FontSize" Value="14"></Setter>
                        <Setter Property="TextBlock.TextTrimming" Value="CharacterEllipsis"/>
                    </Style>
                    
                    <Style Selector="DataGridRow:selected">
                        <Setter Property="Foreground" Value="#E6E6E6"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridCell TextBlock">
                        <Setter Property="Margin" Value="5, 0"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridCell:current /template/ Rectangle#CurrencyVisual">
                        <Setter Property="IsVisible" Value="False" />
                    </Style>
                    
                    <Style Selector="DataGridCell:focus /template/ Grid#FocusVisual">
                        <Setter Property="IsVisible" Value="False" />
                    </Style>
                    
                    <Style Selector="DataGridCell.text">
                        <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridCell.description">
                        <Setter Property="TextBlock.TextAlignment" Value="Justify"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridCell.currency">
                        <Setter Property="TextBlock.TextAlignment" Value="Right"></Setter>
                    </Style>
                    
                    <Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
                        <Setter Property="Fill" Value="#B00"></Setter>
                    </Style>
                    
                    <!-- Styles for editable cells (textboxes) -->
                    <Style Selector="TextBox">
                        <Setter Property="Background" Value="#E6E6E6"></Setter>
                        <Setter Property="Foreground" Value="#181818"></Setter>
                        <Setter Property="CaretBrush" Value="#181818"></Setter>
                        <Setter Property="SelectionBrush" Value="#B00"></Setter>
                        <Setter Property="SelectionForegroundBrush" Value="#E6E6E6"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover">
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                    </Style>
                    <Style Selector="TextBox:pointerover /template/ TextBlock#PART_Watermark">
                        <Setter Property="Foreground" Value="#181818" />
                    </Style>
                    <Style Selector="TextBox:focus">
                        <Setter Property="Foreground" Value="#181818"></Setter>
                    </Style>
                    <Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
                        <Setter Property="Background" Value="#C6C6C6"></Setter>
                        <Setter Property="BorderBrush" Value="#B00"></Setter>
                    </Style>
                    <Style Selector="TextBox:focus /template/ TextBlock#PART_Watermark">
                        <Setter Property="Foreground" Value="#181818" />
                    </Style>
                    
                    <Style Selector="DataGridCell.description TextBox">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
                    </Style>
                    
                    <Style Selector="DataGridCell.description TextBlock">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
                    </Style>
                </DataGrid.Styles>
                
                <DataGrid.Columns>
                
                    <!-- ID Column -->
                    <DataGridTextColumn Header="#" 
                                        Binding="{Binding Id}" 
                                        CellStyleClasses="text"
                                        Width="*"
                                        MinWidth="30"/>

                    <!-- Description Column -->
                    <DataGridTextColumn Header="Description" 
                                        Binding="{Binding Description}"
                                        CellStyleClasses="text description"
                                        Width="10*"/>

                    <!-- Quantity Column -->
                    <DataGridTextColumn Header="Quantity" 
                                        Binding="{Binding Quantity, Converter={StaticResource QuantityConverter}}" 
                                        CellStyleClasses="text"/>

                    <!-- Unit Price Column -->
                    <DataGridTextColumn Header="Unit Price" 
                                        Binding="{Binding UnitPrice, Converter={StaticResource CurrencyConverter}}"
                                        CellStyleClasses="currency"/>

                    <!-- Profit Column (Read-Only) -->
                    <DataGridTextColumn Header="Profit" 
                                        Binding="{Binding Profit, Converter={StaticResource CurrencyConverter}}" 
                                        IsReadOnly="True" 
                                        CellStyleClasses="currency"/>
                    
                    <!-- Partnership Column (Read-Only) -->
                    <DataGridTextColumn Header="Partnership" 
                                        Binding="{Binding Partnership, Converter={StaticResource CurrencyConverter}}" 
                                        IsReadOnly="True"
                                        CellStyleClasses="currency"/>
                    
                    <!-- Total Column (Read-Only) -->
                    <DataGridTextColumn Header="Total" 
                                        Binding="{Binding Total, Converter={StaticResource CurrencyConverter}}" 
                                        IsReadOnly="True"
                                        CellStyleClasses="currency"/>
                
                </DataGrid.Columns>
                
            </DataGrid>
            
            <StackPanel Grid.Row="2" 
                        Orientation="Horizontal" 
                        HorizontalAlignment="Center" 
                        Spacing="10"
                        Margin="0,0,0,5">
                <Button Background="Red" 
                        Content="Delete Selected Item" 
                        Command="{Binding DeleteSelectedItemCommand}"/>
            
                <Button Background="Red" 
                        Content="Generate" 
                        Command="{Binding GenerateQuotePdf}"/>
            </StackPanel>
        </Grid>
    
</UserControl>

User Control View Model:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using desktop_manager.Models;
using desktop_manager.Utility;

namespace desktop_manager.ViewModels;

public partial class NewQuoteViewModel : ViewModelBase
{
        [ObservableProperty]
        private string _clientName;
        
        [ObservableProperty]
        private string _clientAddress;

        [ObservableProperty]
        private string _subject;
    
        [ObservableProperty]
        private ObservableCollection<Item> _items = new()
        {
            new Item("1.1", "Laptop", 1m, 1200.00m),
            new Item("1.2", "Tablet", 2m, 400.00m),
            new Item("1.3", "Phone", 3m, 300.00m),
            new Item("1.4", "Headphones", 1m, 150.00m),
            new Item("1.5", "Desk", 5.60m, 80.00m),
        };
        
        [ObservableProperty]
        private Item _selectedItem;
        
        [ObservableProperty]
        private bool _isCondominium = true; // Bound to CheckBox
        
        [ObservableProperty]
        private bool _vat = true; // Bound to CheckBox

        partial void OnIsCondominiumChanged(bool value)
        {
            Console.WriteLine(IsCondominium);
            
            foreach (Item item in Items)
            {
                item.SetPartnershipCoefficient(value ? 15 : 0);
            }
        }
        
        [RelayCommand]
        private void DeleteSelectedItem()
        {
            if (SelectedItem != null)
            {
                Items.Remove(SelectedItem);
            
                // Re-sort and re-index items after deletion
                SortItems();
            }
        }
        
        public void SortItems()
        {
            Console.WriteLine("sorting items");
            
            List<Item> sortedItems = Items.ToList();
            sortedItems.Sort(new HierarchicalIdComparer());
            
            Items.Clear();
            foreach (var item in sortedItems)
            {
                Items.Add(item);
            }
        }

        public void GenerateQuotePdf()
        {
            DocumentGenerator.GenerateQuote(ClientName, ClientAddress, Subject, Items, Vat);
        }
    
}

To Reproduce

Simply create a project 3 views:

• Main Content Control with buttons to switch between User Controls
• User Control 1
• User Control 2

Then make Content Control load User Control 1 on startup. When you go and change to User Control 2 the application will freeze for ~half a second.

Expected behavior

I expected the User Control to load seamlessly on the first time as it was already instantiated at startup, both the view and the viewmodel.

Avalonia version

11.2.1

OS

Linux

Additional context

No response

[timunie]

You should use a stopwatch to measure what takes time to load. Probably your Data is heavy. Or you use StackPanels where you should not use them. DataGrid needs limited size to work best.

In any case I don't see how this is an Avalonia bug.

[ssaxel03]

When it comes to data I am currently only showing template data, about 5 entries. I tried replacing the current StackPanel with a Grid but load times seem the same. You're right, it's not a really a bug. My bad on that.

[maxkatz6]

It's likely a JIT time needed to process your code and compile for the current machine.
Look into R2R and AOT compilation options.

[ssaxel03]

Just tried both compilation options and that was a lot faster, even thought I now have some warnings to beware of. Thank you a lot for this tip, wasn't even aware it was an option as I'm quite new to .NET development. Now I've got other issues related to iText but that's a problem for the future. Thank you again.