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. 

[cwebb365]

I don’t know about fully but it’s working for me. It’s pretty amazing too. Sorting. More than 2000 records and multi select all working atm.

[Anonymous]

Hi could you link us to fluentui grid? or how you set this up?

[cwebb365]

I used https://docs.microsoft.com/en-us/powerapps/developer/component-framework/tutorial-create-canvas-data... and them modified a bunch from there. It’s basic out of the box but still works.

[Anonymous]

I am also struggling with this scrolling and waiting for data/row to load in.
I tried the idea of having the gallery fixed height (no reference) and like OP it didnt help with the delay in rows loading when scrolling.
But, but, it had me thinking about using the scrollable screen, literally just test it now, and for some reason my gallery can now scroll without the delay.

How went about it: create new scrollable screen > paste my gallery from the other screen into datacard > change height property of gallery to = CountRows(GalleryName.AllItems) * GalleryName.TemplateHeight > on the gallery I turn off scroll bar and nagivation.

It seems the scrollbar on the scrollable screen is more reliable. Its not great solution but at lease it works. Ofcause if you have headings like me you will need to place these in the title container of the scrollable screen. Doable workaround for now till MS get their gallery fix?

Edit: Spelling and missing code bits, also you can steal the "Canvas" Container with its data card from the scollable screen and paste it to your screen and resize it then put your oringal gallery inside 🙂

[cwebb365]

I’ll see if I can get a packaged version of the fluent grid I’ve got. It’s scrolling performance is amazing. You can’t do much in terms of adding controls. But if your Goal is data. Sorting and a on select / selected items it’s amazing.

[Anonymous]

I need controls within it to allow users to edit items/ write comments to the items. So ill stick with my "workaround" with the scrollable screen canvas container.

[cwebb365]

I think there is a fluent grid out there with editable fields but it’s not for pcf so would take some tooling.

[MaximD]

Are there any recent solutions/workarounds to this problem?

[cwebb365]

God, I realize this is almost a year ago since I said I would get something posted. I apologize to anyone that was looking forward to it. Work killed me for awhile and totally forgot about this, this e-mail reminded me of it. I'm going to be doing this in the next few days and post up a video. 

To answer you're question MaximD, not that I know of, haven't been any control updates at all. The FluentUI grid control still is working great however in my apps. I'll come post a link here once I get it done. 

[Anonymous_Hippo]

Thank you @cwebb365 I am eargerly waiting for this !