xamarin - How do I Improve CollectionView Performance

Question

We have a landing page that has this layout:

When you click on one of the section buttons, the ObservableCollection in the ViewModel is set to another list as so:

private async void processtableOfContentsListView_ItemTapped(object sender, ItemTappedEventArgs e)
 {
     var tocItem = e?.Item as TableOfContentsItem;
     if (viewModel.SelectedTableOfContentsItem == tocItem)
     {
         return;
     }
    viewModel.CurrentSectionItems = tocItem.SectionItems;
    viewModel.SelectedTableOfContentsItem = tocItem;
 }

This is simplified as there's other operations going on.

My problem is that the CollectionView is taking too long to change sections. There's a noticeable delay when trying to load up the new items. To be fair, the DataTemplate's for the items are a little complex. I've simplified them as much as possible, but you can still notice a delay in trying to draw them.

I'd like to speed this change up as much as possible, but its starting to look like I may need to just deal with the delay itself instead of freezing. It would be nice to have a loading indication in between changing sections. Like an ActivityIndicator. But I can't seem to find how to make UI changes in the beginning of the EventHandler for the buttons. Even if I clear the ObservableCollection in the beginning of the event handler, it still will wait until the method finishes before showing any UI changes.

I've checked and the event handler is running on the main UI thread. I've even tried running the rest of the code on a background thread after changing the section to see if it would before continuing the method, but no luck:

 private async void processtableOfContentsListView_ItemTapped(object sender, ItemTappedEventArgs e)
 {
     if (MainThread.IsMainThread) //is true
     {   
     }

     var tocItem = e?.Item as TableOfContentsItem;

     await Task.Run(async () =>
     {
         await MainThread.InvokeOnMainThreadAsync(() => {
             viewModel.SelectedTableOfContentsItem = tocItem;
             viewModel.CurrentSectionItems = tocItem.SectionItems;
         });
     });
        
     Task.Run(() => DoWork(sender, e));

 }

My question is two parted.

Does anyone have an idea how to speed up the redrawing of the CollectionView?

If not, how do I set off the UI change to clear the CollectionView in the beginning of the event handler so I can add a loading indicator?

question from:https://stackoverflow.com/questions/65922602/how-do-i-improve-collectionview-performance

Answer 1

Waitting for answers