[Hybrid] Animation lag during 1st render fragment load

[Kebechet]

Description

I am not sure if this is MAUI or Blazor problem.

We use MAUI Hybrid and the whole UI is written in Blazor.
We stubbed upon a problem with animations. When we want to animate Drawer component to show from side, the 1st load with the animation is really laggy.

We experience this problem especially on android (we tested also iOS but there it is really minimal). But not on windows (maybe because of my HW - i9-13900k, 32GB RAM)

I went through performance best practices of Blazor and tried many of them but without any luck.

I suspect that the one-thread model of Blazor causes this. First time render fragments are rendered it will lag the animation and after that they are somehow cached and this problem doesnt show up again. But thats just my guess

Screen_Recording_20240322-110327.mp4

Steps to Reproduce

1. download DrawerTest repo
2. run it on your android
3. observe that the 1st load of the Drawer is more laggy then other loads (this lag can be increased by the amount of component items in the Drawer Content - virtualization doesnt help)

Link to public reproduction project repository

https://github.com/Kebechet/DrawerTest

Version with bug

8.0.6 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 10, Android 14

Did you find any workaround?

no

Relevant log output

No response

[RoiChen001]

Can repro it on the Android platform on the latest 17.10 preview 2(8.0.14.)

[Eilon]

I was able to repro the same thing in a Blazor Web project and then running Chrome in the Android Emulator. So this is either a Blazor perf issue, or an Android/Chrome perf issue.

Here's my Blazor Web repro: https://github.com/Eilon/maui21388standaloneslow (I copied the exact code from the MAUI repro, commit-by-commit).

And below is a recording of it. It's a bit hard to tell, but the first time the red sidebar button is clicked (at 0:07), it just kind of waits a moment, and then the sidebar appears. The next times it's clicked you see the animation happening.

slowpoke-menu.webm

[MackinnonBuck]

@Eilon, would you be able to check if the laggy behavior reproduces on an app with similar layout, styles, etc. but doesn't use Blazor? We're not yet convinced that this is a performance issue with the framework, especially considering that the repro happens on Blazor Server, in which case .NET can't be the one blocking the main UI thread.

[danroth27]

@Kebechet Can you also confirm whether you're seeing this issue on actual devices with Release builds? Or do you only see this in the emulator and with Debug builds?

[Kebechet]

@danroth27 we spotted it in production. So yes, release builds on real devices as well.

[mkArtakMSFT]

@Eilon, would you be able to check if the laggy behavior reproduces on an app with similar layout, styles, etc. but doesn't use Blazor?

@Eilon this is the last question we need an answer for, if you could try it out. Thanks!

[MackinnonBuck]

@Kebechet, if possible, could you try to create a minimal repro that doesn't use Blazor and has the same drawer animation? We suspect this is not an issue with Blazor. If you do that, could you see whether the lag still occurs in the non-Blazor app?

[Kebechet]

@MackinnonBuck

• I have added pure HTML+CSS+JS repro: commit
• I have tested this on my phone and made it run locally based on this video

But it seem the problem is still there. Please can at least 1 extra person test it on their device ?

In case it is android browser problem, what then ?
Because it would influence all MAUI Hybrid people's user experience on Android.

[mkArtakMSFT]

Thanks @Kebechet.
Closing, as this is not a Blazor issue and there is no way we can control this.