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

[supershopping]

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.

xamarin/Xamarin.Forms#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

[ghost]

Hi @supershopping. 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.

[supershopping]

https://github.com/supershopping/ShellFlyoutLagging

I have created a sample project here to reproduce the issue.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[PureWeen]

@supershopping can you try NET7? Give me more details about the device you are testing on? And maybe attach a video? I'd like to quantify "lagging" here.

[supershopping]

The lagging is not very obvious when using the original entry control. I just updated the sample project with a custom outlined entry control.
I recorded a video from physical device Samsung S10 Plus. I haven't tried NET7 yet.

Screen_Record_Samsung_S10_Plus.mp4

[mattleibow]

I think I see the lag when the second page is loaded for the first time... We should be able to run this with the profiler and see what is causing the issues - but we did a whole bunch of work in net7 so testing that will also show different (and hopefully better) results.

[supershopping]

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

Samsung_S10_Plus_NET7.mp4

[angelru]

I'm having the same problem, this also happens when navigating to a page "with a complex layout" with GoToAysnc.

[angelru]

@supershopping have you solved it?

[RomanPoschl]

We are facing same issue.

[dgerding]

Me too.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Android 13.0-API33 with sample Project:
ShellFlyoutLagging.zip(.NET 7)

[007vel]

Any update on this issue?

[jonathanpeppers]

I recorded a .speedscope of this app: shellflyout.zip

But looking at the results, it does not appear to be a problem with Shell. There doesn't appear to be anything that accidentally happens twice, etc.

This looks like it is just as slow as it takes to create the new page and add it to the screen. I see about 700ms (number is likely inflated by the attached profiler) of destroying a fragment, creating a new fragment (and all the MAUI controls), and a layout pass:

The time take here seems like it is large enough to notice something visually lag.

I do see something we can improve with Entry on Android, but this seems completely unrelated to Shell.

@supershopping (or anyone else) do you think you have similar performance if you just make this page the "main page"?

[supershopping]

I don't think there is an issue when making it the "main page" since an splash screen can be implemented.
The issue is concerned only when navigating to a complex page from main page or shell flyout. The visual lag is obvious.

[jonathanpeppers]

@supershopping, right I'm asking if you think this is specific to Shell -- or a general performance issue for all MAUI pages on Android.

[angelru]

@jonathanpeppers
The floating menu has a mini delay when any menu item is first touched. I also noticed lags/crashes when navigating to a page with many controls, the animation hangs momentarily until complete. This does not happen if there is a tag on the landing page.

[jonathanpeppers]

In the trace above, there is about ~230ms of time spent when the menu is touched:

Time spent in:

• microsoft.maui.controls!Microsoft.Maui.Controls.Platform.Compatibility.ShellFlyoutTemplatedContentRenderer.UpdateFlyoutContent()
• microsoft.maui.controls!Microsoft.Maui.Controls.Platform.Compatibility.ShellFlyoutRecyclerAdapter.OnCreateViewHolder(Android.Views.ViewGroup,int)
• microsoft.maui.controls!Microsoft.Maui.Controls.Platform.Compatibility.ShellFlyoutRecyclerAdapter.OnBindViewHolder(AndroidX.RecyclerView.Widget.RecyclerView/ViewHolder,int)
• microsoft.maui.controls!Microsoft.Maui.Controls.Platform.Compatibility.ContainerView.OnMeasure(int,int)

Maybe it could also be improved, but the new page seems to be the worse offender in this example.

[Dreamescaper]

@jonathanpeppers
Is is possible to move that work before (or after) the flyout starts closing? I think this lag would be much less noticeable if it wouldn't interrupt the animation.

[jonathanpeppers]

I think some of this stuff used to happen at startup (.NET 6), and we noticed Shell impacted startup a lot. So now some of the work happens when you open the flyout in .NET 7. It looks like it is the last possible time to do this work.

The PRs I sent so far, save about ~70ms of the first flyout opening (out of about 230ms) on a Pixel 5. Maybe I can just keep looking for more.

[Dreamescaper]

I think some of this stuff used to happen at startup (.NET 6), and we noticed Shell impacted startup a lot. So now some of the work happens when you open the flyout in .NET 7. It looks like it is the last possible time to do this work.

Well, that's not really what I meant. Is it possible to "move" that lag right after the click, but before the flyout starts moving? Or right after the flyout stops moving? I.e. 0.1 second earlier or later? So it wouldn't interrupt the animation.

[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?

[Lug16]

Hi guys... I'm also facing the same lag with MAUI .net 8 (Android and iOS devices). Any considerations for this?

[Hardikzinzala]

Hi guys... I'm also facing the same lag with MAUI .net 8 (Android and iOS devices). If anyone have any update regarding this issue so inform me.

[PureWeen]

Does this happen when you use a FlyoutPAge vs Shell?

FlyoutPage is a bit of a newer build than Shell and we'd like to convert Shell over to FlyoutPage at some point