Virtual lists broken

[kyranjamie]

We use virtuoso for performance reasons, so we don't render too much content at once, causing performance issues with the main thread being blocked.

Some recent changes have broken this. See #5148 which demonstrates the issue. We render all items in the list, causing the thread to be blocked while we render the stacks accounts in the list.

2024-04-01-000150.mp4

Notice the delays, and lack of hover animations, that don't work while the thread is blocked.

[pete-watters]

I can take a look at this as I may have introduced it with some recent changes fixing bugs

[pete-watters]

I did some investigation on this today and from what I can see, we have never been using Virtuoso to load only what's visible in the viewport. I went back a fair few versions, to v6.20 and even to Hiro Wallet in v6.0.0.

We always render the full amount of available accounts in this list.

I dug deeper into the code and cross referenced their example code and I think the issue lies in how we are setting the height of Virtuoso. I didn't go back further than v6.0.0 but in there we are setting the list height with this code:

<Virtuoso
        initialTopMostItemIndex={currentAccountIndex}
        height="72px"
        style={{ paddingTop: '24px', height: '70vh' }}
        

I took a look at their sample code and added it to the APP. That worked and it relates to them specifying the height in this format:

 <Virtuoso
      style={{ height: 400 }}
     

If I change our lists to use that format then I can see them only loading whats in the viewport. Here's a video to demonstrate:

Area.mp4

We are using Virtuoso in 3 places right now. In the past we had a lot of bugs related to height and accounts being cut off from view. I added fixes for those issues but I think the underlying issue was us not using the height correctly.

I'll work on a fix to those issues now.

[kyranjamie]

We always render the full amount of available accounts in this list.

Nope. See this PR from years ago that fixes render perf issues #2078

In your example, all the account fit in the view, so it renders them all. In video below, 3c9c0f8, with hundreds of accounts, we log the index when the item mounts. Each item renders only when it appears in view.

2024-04-03-000151.mp4

It looks like it broke in 6262267, where running the same code, we see it render them all. Perhaps to do with the change to dialog?

2024-04-03-000152.mp4

[pete-watters]

We always render the full amount of available accounts in this list.

Nope. See this PR from years ago that fixes render perf issues #2078

In your example, all the account fit in the view, so it renders them all. In video below, 3c9c0f8, with hundreds of accounts, we log the index when the item mounts. Each item renders only when it appears in view.

2024-04-03-000151.mp4
It looks like it broke in 6262267, where running the same code, we see it render them all. Perhaps to do with the change to dialog?

2024-04-03-000152.mp4

OK thanks, let me investigate more. I still think we aren't using it properly as in my example, only 4 Virtuoso items get logged which is what is visible but we are logging 13 even though only 9 are visible.

[pete-watters]

I had indeed broken this and implemented a fix #5170 that reduces the impact of the bug.

Visually it's not perfect though so I will keep working on it to finish it off in #5171

[pete-watters]

My workaround means that sometimes the last entry in the list is cut off:

I'll fix this ASAP

[pete-watters]

The problem with loading all the data was fixed but there is a UI bug I will fix #5242

[pete-watters]

Closing this as I have fixed the issue in #5242. Pending code review