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
• New While the effort is underway, are there any workarounds for folks to improve performance? (e.g., delay hydration on components that might reside within a parent component, or until the component(s) is/are needed?)

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
• https://tanstack.com/virtual/
• https://www.npmjs.com/package/@lit-labs/virtualizer

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.