Add support for virtualization

[jcfranco]

Background

Rendering items based on a dataset is a common workflow and adding support for virtualization will greatly help rendering these items in an efficient manner.

Additional considerations

• flexible APIs to support:
  • data population, pagination (fetching/updating)
  • navigation, search, selection
  • state management (e.g., app needs to keep place in a virtualized component when navigating away and back)
  • animation/styling hooks to allow devs to provide placeholder content at certain points (e.g., initial loading or while scrolling)
    • a skeleton component (related) might be useful, albeit not required if we provide hooks for developers
      navigating away and back)
• provide hooks to refresh on keyboard/scroll events
• guidelines/examples should be provided as well

Priorities

• Utils should be made available first, afterwards we could look into providing a component based on feedback
• List use cases should cover most of our current needs, we can evaluate other types (e.g., tree, grid, carousel) based on feedback (combobox, select might be good candidates to start with)

Useful resources

• https://github.com/bvaughn/react-window
• https://github.com/bvaughn/react-virtualized

Related issues

• Calcite Tree Performance Refactor #4854
• Virtualized Select Component #4112
• New Component / Enhancement: Handle large data lists #1460
• [Combobox] Improve lag time when large numbers of Combobox Items are present #6392
• Optimize loading/creating Table #8265

Desired Outcome

Rich utility/utilities to support virtualization

[driskull]

@jcfranco @geospatialem any idea on when this might be implemented?

Its a blocking issue for the Maps SDK / MapViewer to be able to use calcite components for their search experience and search widget.

[geospatialem]

A spike will be performed to determine a breakdown of issues for next steps, where:

1. The above issue will be modified to an epic and its overall priority re-scoped (likely to p - medium)
2. Child issues will be created, which could include:
   • Animation/styling hooks to allow devs to provide placeholder content at certain points (e.g., initial loading or while scrolling)
     • Note: high priority for the Maps SDK team to achieve with the combobox. Where a hook is needed, but not a skeleton component - for the component's filter/search logic.
   • Data population, pagination (fetching/updating)
   • State management
   • A skeleton component
   • Possibly others mentioned in the above description
3. Could also include specific components, which include, but are not limited to:
   • combobox
   • filter (could leverage combobox)
   • dropdown
   • list
   • select
   • table
   • tree

The above issue will also address situations where large datasets are used, such as some implementations of combobox, where on our doc site we load in all of the Calcite UI icons and they don't display all of their contents.

[pllcoster]

Giving this issue a +1 as in our app we are often working with thousands / tens of thousands of items and virtualization would help in various ways, particularly for list

[gpbmike]

Would love to see combobox get the virtualization treatment for use with Site Scan.

[nwhittaker]

Field Maps Designer is also very interested in virtualization for list and combobox elements. We'd like to use those elements when editing/choosing values from domains. Some of our clients' domains easily have 1,000+ values and the Calcite elements are currently too slow to load and interact with (e.g. drag-and-drop) when this much data is involved.