Improving Navigation Speed and Performance

[LewisEKay]

Description

Using both Xamarin Forms and Maui for many years now I’ve noticed that page navigation performance is not great when the view needs to load quite a few items, this could even just be a CollectionView, with bindings, with a few items in that can cause the issue. It also occurs when navigating between shell tabs.
The issue primarily being where the page will begin navigating, maybe jitter as it’s coming into view then lock up the UI thread and finally pop in with content.

I’ve seen some posts stating that a good way to solve it is by adding a Task.Delay(500) to OnAppearing so that the view can animate in before attempting content load, but adding this in doesn’t make it function like an android app that’s made in Android Studio. You still get a delay before any content is shown.

if you look at other apps not made with Maui, when navigating it will be smooth and load almost instantly, such as spotify being able to select a tab and within less than half a second you have data populated straight from a server too.

Public API Changes

Not sure entirely how this can be implemented in code better but maybe some better documentation detailing how to get around these navigation performance issues.

Intended Use-Case

In my apps it’s very important for a quick experience of loading pages, as it is with most apps.

[xtuzy]

maybe you can offer a video to compare they, i don't understand what you're saying. i use collectionview alway use Task.Run to load some data, when navigation to this page, collectionview will show a Activityindicator, load more data also have a Activityindicator

[Symbai]

I agree with @LewisEKay because I noticed the same. It only happens once, the very first time. The next times you open this page it loads almost immediately. I always thought that its a .NET thing.

@xtuzy Its not about loading data. Its about loading/building the UI the first time. In my case for example the data is already there. But if you navigate to the page it has to create the UI for this data and this is what is really laggy. Even in release mode with AOT the screen hangs about 1-2 seconds.

[jfversluis]

@jonathanpeppers have anything to offer here?

[tom-b-iodigital]

I experience the exact same thing. Navigation in appshell when you go to a page for the first time is extremely slow. +- 2-3 seconds between tapping the tab item and the page showing up. This occurs as soon as a layout is somewhat complex and has nothing to do with data loading. Subsequent page loads are instantly, probably because the entire page is kept in memory. Enabling AOT and LLVM somewhat helps, but the entire app still feels very laggy compared to xamarin forms

[drasticactions]

@LewisEKay Could you create examples showing the types of issues you describe?

I agree that performance, in general, could be improved, but coming up with actionable items and goals could turn this from a proposal to actionable issues we (as a community) could then tackle and have a baseline for showing progress.

[angelru]

This is inherited from Xamarin Forms.

In Shell when navigating to a page that has a "complex" layout, that crash occurs, slow navigation. It is enough to create a page with 7 entry with its styles, bindings and navigate to this page. If the animation is deactivated, this blocking or slow navigation does not occur.

[LewisEKay]

https://youtube.com/shorts/x5xYREfKQhA?feature=share
Please see this video for an example of what's happening.
It's made using a new .NET MAUI application in .NET 7.0, running on Samsung S20 Ultra (powerful device so hardware is not the issue). Same occurs on a few other devices I have.

As you can see from the video, the SettingsView loads fine, but the MonkeysView is slow. Now I understand this is most likely happening due to it needing to account for bindings and load the data within its startup. But is there a way we can speed this up so it's almost instant on first tap?
For example if you look at apps like Spotify that use tabs, they can load an insane amount of data on first startup when switching tabs. Same goes with many other apps out there.
Please Note:
Even with x:DataType set it does the same outcome.
By doing await Task.Delay(500) in the OnAppearing removes the slow delay, but obviously is then adding a 500ms delay on top of the load time, which isn't always ideal. I think if this is the intended behavior of how MAUI will work then it needs to be better detailed in the docs.

This is the code for the MonkeysView.
`

        <Image
            Source="dotnet_bot.png"
            SemanticProperties.Description="Cute dot net bot waving hi to you!"
            HeightRequest="200"
            HorizontalOptions="Center" />

        <Label
            Text="Hey this is the monkeys page!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />

        <CollectionView ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Name}"/>
                        <Label Grid.Column="1" Text="{Binding Age}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
            
        </CollectionView>
      

    </VerticalStackLayout>
</ScrollView>`

This is the code for MonkeysView.xaml.cs
`public partial class MonkeysView : ContentPage
{
public ObservableCollection Monkeys { get; set; } = new ObservableCollection();

          private Random _random;
      
          private List<string> _names = new List<string>
          {
	        "Mong Clumbort",
	        "Margaret",
	        "King Kong",
	        "Monkeh",
	        "Jimmy",
	        "Hairy Jeff",
	        "Ragged Pete",
	        "Timothy Grumpleton",
	        "Barry Hedgemane",
	        "Mo",
	        "Jim Bob",
	        "Trey"
    
        };
    
        public MonkeysView()
        {
	        InitializeComponent();
	        BindingContext = this;
	        _random = new Random();
    
	        for(int i = 0; i < 30; i++)
	        {
		        Monkeys.Add(new MonkeyModel
		        {
			        Age = _random.Next(1,30),
			        Name = _names[_random.Next(0,_names.Count)]
		        });
    
            }
    
        }
    
    
    }
    public class MonkeyModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

`

[xtuzy]

This is my app, i feel my page that have CollectionView is fast, i do all in code

sharex-20230417211003.mp4

[LewisEKay]

@xtuzy do you use code behind instead of XAML as well as Task.Delay(500)?

[xtuzy]

code like this:

public partial class MyPage : Page
{
        private MyViewModel viewModel;

        public MyPage()
        {
            InitializeComponent();
            viewModel = new MyViewModel();
            BindingContext = viewModel;
            
            //then add a collectionview to page and binding data
         }
}

public partial class MyViewModel : ObservableObject
{
        public MyViewModel()
        {
            Task.Run(async () =>
            {
                LoadLittleData();
             }
         }
}

notice, i use PureWeen.Maui.FixesAndWorkarounds, i don't know if it is related

[jonathanpeppers]

Has anyone profiled their app to maybe give some insight into what the biggest offenders are?

https://aka.ms/profile-maui

Or if you can share a sample project that shows the behavior, we can profile on our side, thanks!