Optimize loading of Tree children

[avkolomeets]

Description

I'm trying to use the calcite-tree component in Data Browser in the BA Web app. The problem is that, while browsing for variables coming from the server, sometimes we need to show a long list of items. There can be up to 10,000 items total, grouped by categories. Right now it takes about 10 seconds to build a list like the one below, which makes it unusable.

How this can be optimized:

(1) Delay the creation of hidden children in the collapsed nodes. No need to create them all at once. The problem with Calcite in general is that it gets created from already added HTML tags, which then get hydrated. Maybe there is a work-around for that right now.

(2) The approach dgrid uses https://dgrid.io which is to display only the items in the view. As you scroll down, elements that are out of sight get removed and new ones are created. This allows for a very lightweight output, as only a few HTML elements are present in the list at the moment.

Acceptance Criteria

calcite-tree must work faster.

Relevant Info

No response

Which Component

https://developers.arcgis.com/calcite-design-system/components/tree/

Example Use Case

No response

Esri team

ArcGIS Business/Community Analyst

[avkolomeets]

@jcfranco Added a codepen sample.

https://codepen.io/cont-kolomeets/pen/jOKwVMG?editors=1000

It's an extreme example, but shows the problem. The first node has 5000 children, but the user doesn't have to wait for 14 seconds for the whole tree to load, because those children are not visible.
Also with so many HTML elements loaded at once, the whole page starts lagging.

As mentioned above, in our own implementation of a tree in Data Browser we render only visible HTML elements and destroy those that get out of sight as you scroll, which makes it super fast and can render a tree with 1,000,000 items total, each row having complex content (checkbox, actions, ect.).

[geospatialem]

Blocked by the virtualization effort in #7384.