What could cause .wasm to load images so slowly? - uno-platform

Question

In my Uno test project, it takes about 4 seconds to load 50 images into an ItemsWrapGrid on the UWP platform. The same images take 225 seconds (3 minute 45 seconds) to load into a WrapPanel. Since the only difference in the code is ItemsWrapGrid or WrapPanel, I'm thinking the problem is the WrapPanel, but I can't be sure, it could be in how the platforms implement the <Image ItemsSource=""/.
I don't have any experience with .wasm so I don't know if this is expected (is it?). Is there something I can do to Optimize for wasm?
or any other thoughts? 4- minutes is just not acceptable compared to about 4 seconds.
Thanks
Thanks for asking if I could repro in Uno Playground. I was unaware of the site.
I was NOT ABLE to repro on the playground, which led me to investigate other possibilities.
I have resolved the issue.
My design pattern was to define a single ObservableCollection without a property change notification:
public ObservableCollection<PictureViewModel> Pictures {get;set }
I would bind that to my UserControl and update by Pictures.Clear().
This is my snippet that resulted in the long render time:
List<Picture> PictList = await DataService.GetPicturesByEvent(this.SelectedEvent.EvtKey, clubkey, skipPosition, this.PagingViewModel.PageSize);
List<PictureViewModel> PictVMList = mapper.Map<List<Picture>, List<PictureViewModel>>(PictList);
if (PictVMList != null && this.SelectedEvent != null && !string.IsNullOrEmpty(SelectedEvent.FilePath))
{
this.Pictures.Clear();
foreach (PictureViewModel item in PictVMList)
{
item.Parent = this;
item.SetURL(SelectedEvent);
this.Pictures.Add(item);
}
this.SelectedPicture = PictVMList.Count > 0 ? PictVMList.First() : null;
}
To resolve the long render time. I:
Made my ObservableCollection observable.
Removed all instances of Picture.Clear();
Created a new ObservableCollection whenever it needed updating.
The Resolved code snippet is:
List<Picture> PictList = await DataService.GetPicturesByEvent(this.SelectedEvent.EvtKey, clubkey, skipPosition, this.PagingViewModel.PageSize);
List<PictureViewModel> PictVMList = mapper.Map<List<Picture>, List<PictureViewModel>>(PictList);
if (PictVMList != null && this.SelectedEvent != null && !string.IsNullOrEmpty(SelectedEvent.FilePath))
{
foreach (PictureViewModel item in PictVMList)
{
item.Parent = this;
item.SetURL(SelectedEvent);
}
this.SelectedPicture = PictVMList.Count > 0 ? PictVMList.First() : null;
}
Pictures = new ObservableCollection<PictureViewModel>(PictVMList);
I don't understand why my initial code pattern did not work as expected, but can live with adding an OnPropertyChanged("Pictures") notification.

Answer 1

As of Uno 3.10, ItemWrapGrid is not supported on WebAssembly. Using the WrapPanel control will force the materialization of all the items in the list, making the performance particularly slow.
You're not specifying which control you're using as a panel, but if you're using a ListView control, the virtualization will be enabled, though not with the layout wrapping that you need.
If you want virtualizing grid-like layouts, you can also use the ItemsRepeater control, and its layouts (e.g. FlowLayout, StackLayout, or WCT's WrapLayout).