export function AsyncListWithSpinner()

in src/stories/ActionList2/examples.stories.tsx [302:343]
39 lines of code
3 McCabe index (conditional complexity)

export function AsyncListWithSpinner(): JSX.Element {
  const [results, setResults] = React.useState(branches.slice(0, 6))
  const [loading, setLoading] = React.useState(false)
  const [selected, setSelected] = React.useState('main')

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const filter = async (event: any) => {
    setLoading(true)
    const filteredResults = await filterSlowly(event.target.value)
    setResults(filteredResults.slice(0, 6))
    setLoading(false)
  }

  return (
    <>
      <h1>Async List</h1>
      <p>
        This pattern has an ActionList with single selection, the contents of which can change asynchronously through a
        filter. This pattern can be found in branch selection menus via the SelectPanel component.
      </p>

      <TextInput onChange={filter} placeholder="Search branches" sx={{m: 2, mb: 0, width: 'calc(100% - 16px)'}} />
      {results.length === 0 ? (
        <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
      ) : null}
      <ActionList
        selectionVariant="single"
        role="listbox"
        aria-label="Select a branch"
        sx={{height: 208, overflow: 'auto'}}
      >
        {loading ? (
          <Box sx={{display: 'flex', justifyContent: 'center', pt: 2}}>
            <Spinner />
          </Box>
        ) : (
          results.map(name => (
            <ActionList.Item key={name} role="option" selected={selected === name} onSelect={() => setSelected(name)}>
              {name}
            </ActionList.Item>
          ))
        )}