Gallery scrolling performance issues

[pmcgurn01]

I'm hoping there's some kind of planned performance improvement work on the gallery control, but posting this, in case there isn't.

At present, the gallery control is incredibly clunky/laggy when scrolling any faster than what I'd consider to be "unreasonablly slow".  The behavior is 

1. I scroll
2. The rows move up
3. There is a huge empty whitespace for about 1-2 seconds
4. The white space fills up as the elements render
5. Repeat process

I will note:

• It doesn't matter if I bind the gallery to a local collection or directly to the data source.   Since my data source (Azure SQL) is too large to be cached to a collection, I'm limited to direct binding anyways.
• It's reproducible in web player (Chrome browser) and mobile (iPad app)
• I am using ThisItem to bind all data to controls in the gallery.  At this point, I have 8 controls total in the template row, which are a mix of images (2 icons) and labels (6 of those).
• It seems to be completely unrelated to latency in the network.  I can verify this by watching the troubleshooting console, and the lag isn't tied to any network calls, though I do see those happen at each 100 rows of data or so.
• I can reproduce this on other data sources that I am caching to a local collection on app OnStart, where I see this empty whitespace when I scroll fast enough to where the gallery would need to render more than ~5 rows at a time.  In that case, the datasource is cached to a local collection, and that gallery only has 5 labels in the template row.

I'm attaching a video of this behavior.  While the lag you see might be "acceptable", it's not a great user experience on any platform. I understand that the gallery is probably working as designed for keeping resource utilization low on mobile devices, however, since this can be reproduce on mobile, too, I'm asking that Microsoft improve this. 

[pmcgurn01]

Do you mean the whole gallery, or the controls within the gallery that are bound to the content/data?  In my case, the gallery/parent is set to a dynamic height, but it's based off the heights of the app and a control that's vertically above the gallery.  I tried setting my gallery to a fixed height, to test, and had no luck.  My controls within that gallery are already a fixed height and the gallery's TemplateSize property is also fixed.

[TomLanz]

Our case was the whole gallery. It's height was being set dynamically based on size of its contents. We changed that to an explicit number of pixels and the lagging we were seeing while scrolling went away. 

Sounds like perhaps a different issue than what you're facing. 

[pmcgurn01]

Update on this, and likely to dash the hopes of many that are following it.

So the way Microsoft designed this component, it's actually re-rendering as part of the scrolling event, which appears to trigger after the scroll is done.  So the content "isn't visible", until this happens.  I don't see a way to work around this, as they clearly designed this for very slow scrolling, very few items, and/or very simplistic use cases.  Anything with a lot of data, a lot of controls in the gallery template, or both, are pretty much out of luck without a redesign or overhaul of the gallery component by Microsoft.  The only remotely close alternative for displaying data tabularly is DataTable, but the flexibility to customize the look and feel of that component is extremely limited.

[Anonymous]

Dang, that's crazy. The Gallery control, in my mind at least, is a critical workhorse control for most all app operations. I can't think of an app I have where a Gallery isn't used extensively. Every time you see cool customizations or screen layouts, a Gallery is typically utilized in there somewhere. That thing is lifeblood.

[MikeyMole]

Bumping this. What is the deal with this? Like 30 records in a collection and and it's so poor when scrolling! It's not an excessively control heavy gallery either. Please sort this out MS 🙂

Hard to convince my users that this can compete with other platforms based on performance...

[dave-jorgensen]

Hi.. couple things that help (but yes, performance is still poor, these things just make it worse)

1. Don't have relative heights of any controls in the gallery, likewise for the gallery itself. Make sure they are fixed values.
2. Use local collections for the datasource.

[MikeyMole]

Thank you Dave! I appreciate the help. Actually I have recently had some real success in making it perform better and feel more responsive. I will be sharing them on this thread as soon as I get time.

[Anonymous_Hippo]

I have added this as an idea . Please upvote 

https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Fix-Gallery-scrolling-performance-issue/idi-p/1...

[cwebb365]

I’ve gotten the fluentui grid working in my test app. It’s amazing and performance is great. Obviously it’s just a grid but it supports so much in terms of drag to select. Multi select. Column resize and ordering etc. still has some things I’m trying to figure out but I got the basic grid working and multi select etc.  I’m going to do a video and make the solution available once I finish learning and getting this done in the next few days.  

[Anonymous_Hippo]

@cwebb365  Please don't forget to post a link of that video here 🙂 . Also is fluent UI supported in Canvas application ?