Xamarin.forms: [Shell] Flyout menu item SelectionChanged navigation too laggy.

[Akintola-Stephen]

Description

[Shell] Flyout menu item SelectionChanged navigation is too laggy/slow

Steps to Reproduce

1. Create a project with shell and add two ShellItems which now gives you menu items on the flyout
2. Reference two pages which you've created within your project in the ShellItems e.g
   
   
   
   
   
   
   
   
   
   
   
   
3. Then, try to switch between the too pages

Expected Behavior

Navigation should be smooth, Should not lock the UI.

Actual Behavior

"Laggy", Slow and locks the UI with screens like the one shown here #5073

Basic Information

• Version with issue: 4: pre-4
• Last known good version:?
• IDE: Visual Studio 2017

• Platform Target Frameworks: Android 7:8-9

• Affected Devices: Samsung Galaxy S9pus- S8plus, Emulators

Screenshots

Parent: #2415

[tmulin]

I got the same problem . The same app switch very smoth on iOS platform, but on android phones , when switch between tabbed pages , it's more slow than it on iphones .

[pauldipietro]

I think what I see is a small bit of stutter, at least on an emulator. I'm sure we can look into this further.

[samhouts]

This is still an issue on pre9. I'm using a device, so it's not just emulator.

[Hasanajouz]

This issue should be fixed in XF 4 pre 10
or it will be released soon.
It is still too laggy and flickers alot when navigating in pre 10

[PureWeen]

@Hasanajouz this particular fix will be part of the official pre10

we still want to tweak it a little bit more but the change with #5755 should make it better
once that is out please test and let us know how it goes

[karthitect]

I downloaded the Xanimals sample and I see a very noticeable stutter when navigating to items from the flyout menu. This is only on Android (both emulator and physical device). I don't see this on iOS.

My Xamarin Forms version is 4.1.0.555618.

[bytefish]

I am using the TailwindTraders sample application with Xamarin.Forms 4.1.0 and I can confirm, that the Navigation is laggy on the Device (Moto G 5, Android 8.1.0).

[Mikilll94]

The animation is clearly laggy on Android. I have opened an issue which demonstrates that:

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

Is there any workaround for this behavior?

[RamNivi]

Flyout is slowly closed so tell me any link or result to fix this

[wagenheimer]

Why is this bug closed? It still present!

[tossingc]

I have a workaround - it's not pretty, but it stops the flyout jitter on close. My hope is that it sheds some light to the development team on a fix for this and get others a temporary workaround.

It looks like the problem is that there is too much going on in the main thread while the flyout close transition is trying to run. (Android DrawerLayout CloseDrawer() animation)

NOTE: this workaround addresses the Xamarin Forms logic for creating and setting the page blocking the UI thread, but any other app logic running on the UI thread will cause the same jittery "close drawer" animation. One way to mitigate this would be to listen for FlyoutIsPresented to become true and pause any update logic running from running on the UI thread until FlyoutIsPresented has been false for some period. (i.e. 1000ms)

In your subclass of Shell:

1. override OnPropertyChanged and store the last time the FlyoutIsPresented property was set to false
2. override OnNavigating and if the last time the FlyoutIsPresented property was set to false is less than some value (using 1000ms in the code below), then assume the Flyout was just hidden and perform the following:
3. cancel the navigation
4. set FlyoutIsPresented to false
5. raise OnPropertyChanged for the FlyoutIsPresented to trigger the ShellFlyoutRenderer to close the drawer
6. wait a brief period for the flyout to close
7. set a flag that we cancelled the navigation so we know to skip this check on the next call to OnNavigating
8. re-run the original navigation in the arguments passed to OnNavigating the first time

    public class AppShell : Shell
    {
        ...

        private DateTime LastFlyoutHiddenUtcDateTime { get; set; }

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == nameof(FlyoutIsPresented))
            {
                if (!FlyoutIsPresented)
                {
                    LastFlyoutHiddenUtcDateTime = DateTime.UtcNow;
                }
            }
        }

        private bool WasNavigationCancelledToCloseFlyoutAndReRunAfterADelayToAvoidJitteryFlyoutCloseTransitionBug = false;

        protected override async void OnNavigating(ShellNavigatingEventArgs args)
        {
            if (!WasNavigationCancelledToCloseFlyoutAndReRunAfterADelayToAvoidJitteryFlyoutCloseTransitionBug)
            {
                // if the above value is true, then this is the re-run navigation from the GoToAsync(args.Target) call below - skip this block this second pass through, as the flyout is now closed
                if ((DateTime.UtcNow - LastFlyoutHiddenUtcDateTime).TotalMilliseconds < 1000)
                {
                    args.Cancel();

                    FlyoutIsPresented = false;

                    OnPropertyChanged(nameof(FlyoutIsPresented));

                    await Task.Delay(300);

                    WasNavigationCancelledToCloseFlyoutAndReRunAfterADelayToAvoidJitteryFlyoutCloseTransitionBug = true;

                    // re-run the originally requested navigation
                    await GoToAsync(args.Target);

                    return;
                }
            }

            WasNavigationCancelledToCloseFlyoutAndReRunAfterADelayToAvoidJitteryFlyoutCloseTransitionBug = false;

            base.OnNavigating(args);
        }

        ...
    }

[cgomezm]

Is this still active? I am running on andoroid physical device and closing the flyout gets stuck for a moment

[wagenheimer]

I think I found the reason for it!
After clicking to open a Shell, the device is making a GC!

"08-26 17:33:58.600 I/mono-stdout(11797): Xamarin.Forms.ShellNavigatedEventArgs
08-26 17:33:59.798 I/zygote  (11797): Explicit concurrent copying GC freed 28080(1474KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 4MB/8MB, paused 109us total 77.579ms
08-26 17:33:59.809 D/Mono    (11797): GC_TAR_BRIDGE bridges 656 objects 67640 opaque 25405 colors 656 colors-bridged 656 colors-visible 656 xref 4 cache-hit 0 cache-semihit 0 cache-miss 0 setup 0.11ms tarjan 53.63ms scc-setup 0.23ms gather-xref 0.03ms xref-setup 0.02ms cleanup 4.22ms
08-26 17:33:59.809 D/Mono    (11797): GC_BRIDGE: Complete, was running for 92.53ms
08-26 17:33:59.809 D/Mono    (11797): GC_MINOR: (Nursery full) time 81.74ms, stw 83.21ms promoted 668K major size: 10720K in use: 9827K los size: 4096K in use: 3287K
Thread started:  #25"

Is there some way to disable the GC during the page loading?