Android - Shell flyout navigation is lagging when the navigation page has many controls /custom controls

Description

Shell flyout item navigation is lagging when the navigation page has many controls /custom controls. The lagging situation gets worse when the page has multiple custom controls and/or more complex layout.

There is an open issue on XF too and it still has not been resolved for a long time. See below link.

https://github.com/xamarin/Xamarin.Forms/issues/7521

The issue is still exist with MAUI. I think it’s fair to bring it up here again.

Steps to Reproduce

1. Create a MAUI app with default template.
2. Add a test page with ten entries on viewmodel bindings.
3. Add a flyout item in AppShell.
4. When first time navigate to TestPage from shell flyout item, there is a lagging pause before opening the Test Page. The lagging situation gets worse when you have multiple custom controls and/or more complex layout.

Here is the view and viewmodel for Test Page.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShellFlyoutLagging.Views.TestPage"            
             xmlns:local="clr-namespace:ShellFlyoutLagging.ViewModels"
             Title="TestPage">

    <ContentPage.BindingContext>
        <local:TestPageViewModel />
    </ContentPage.BindingContext>
    <VerticalStackLayout Spacing="10" Padding="30">
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Entry Text="{Binding EntryNumber1}"/>
        <Entry Text="{Binding EntryNumber2}"/>
        <Entry Text="{Binding EntryNumber3}"/>
        <Entry Text="{Binding EntryNumber4}"/>
        <Entry Text="{Binding EntryNumber5}"/>
        <Entry Text="{Binding EntryNumber6}"/>
        <Entry Text="{Binding EntryNumber7}"/>
        <Entry Text="{Binding EntryNumber8}"/>
        <Entry Text="{Binding EntryNumber9}"/>
        <Entry Text="{Binding EntryNumber10}"/>
        
    </VerticalStackLayout>
</ContentPage>

    public partial class TestPageViewModel:ObservableObject
    {
        [ObservableProperty]
        public int _EntryNumber1;

        [ObservableProperty]
        public int _EntryNumber2;

        [ObservableProperty]
        public int _EntryNumber3;

        [ObservableProperty]
        public int _EntryNumber4;

        [ObservableProperty]
        public int _EntryNumber5;

        [ObservableProperty]
        public int _EntryNumber6;

        [ObservableProperty]
        public int _EntryNumber7;

        [ObservableProperty]
        public int _EntryNumber8;

        [ObservableProperty]
        public int _EntryNumber9;

        [ObservableProperty]
        public int _EntryNumber10;
    }

Link to public reproduction project repository

N/A

Version with bug

Unknown/Other (please specify)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 31

Did you find any workaround?

No.

Relevant log output

No response

[supershopping]

I did another video based on .NET 7. Could not visually see any improvement on the lagging issue.

https://user-images.githubusercontent.com/5925578/197045646-bb2c89e9-00f2-48a5-987a-2715f837cdb2.mp4

[jonathanpeppers]

I was looking at both places. When pushing a new page, the slowness appears to be how long that page takes, in general.

If we add a delay there, you would see a white page instead as the flyout hides. @PureWeen have we thought about doing something like that in the past?