account for loaders in base collection filter

Author: LFDanLu

packages/@react-aria/collections/src/BaseCollection.ts

@@ -296,11 +296,16 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
             newCollection.firstKey = clonedNode.key;
           }
 
-          if (lastNode != null && (lastNode.type !== 'section' && lastNode.type !== 'separator') && lastNode.parentKey === clonedNode.parentKey) {
-            lastNode.nextKey = clonedNode.key;
-            clonedNode.prevKey = lastNode.key;
-          } else {
-            clonedNode.prevKey = null;
+          if (lastNode != null) {
+            if (
+              (lastNode.type !== 'section' && lastNode.type !== 'separator' && lastNode.parentKey === clonedNode.parentKey) ||
+              (clonedNode.type === 'loader')
+            ) {
+              lastNode.nextKey = clonedNode.key;
+              clonedNode.prevKey = lastNode.key;
+            } else {
+              clonedNode.prevKey = null;
+            }
           }
 
           clonedNode.nextKey = null;
@@ -338,7 +343,9 @@ function shouldKeepNode<T>(node: Node<T>, filterFn: (nodeValue: string) => boole
     } else {
       return false;
     }
-  } else if (node.type === 'header') {
+  } else if (node.type === 'header' || node.type === 'loader') {
+    // TODO what about tree multiple loaders? Should a loader still be preserved if its parent row is filtered out
+    // Actually how should a tree structure be filtered? Do levels no longer matter or does it filter at each level?
     return true;
   } else {
     return filterFn(node.textValue);

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import styles from '../example/index.css';
 import {useAsyncList, useListData, useTreeData} from 'react-stately';
 import {useFilter} from 'react-aria';
+import { MyListBoxLoaderIndicator, renderEmptyState } from './ListBox.stories';
 
 export default {
   title: 'React Aria Components',
@@ -849,3 +850,85 @@ export const AutocompleteSelect = () => (
     </Popover>
   </Select>
 );
+
+interface Character {
+  name: string,
+  height: number,
+  mass: number,
+  birth_year: number
+}
+
+
+export const AutocompleteWithAsyncListBox = (args) => {
+  let list = useAsyncList<Character>({
+    async load({signal, cursor, filterText}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      await new Promise(resolve => setTimeout(resolve, args.delay));
+      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <AutocompleteWrapper>
+      <div>
+        <TextField autoFocus data-testid="autocomplete-example">
+          <Label style={{display: 'block'}}>Test</Label>
+          <Input />
+          <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
+        </TextField>
+        <Virtualizer
+          layout={ListLayout}
+          layoutOptions={{
+            rowHeight: 50,
+            padding: 4,
+            loaderHeight: 30
+          }}>
+          <ListBox
+            {...args}
+            style={{
+              height: 400,
+              width: 100,
+              border: '1px solid gray',
+              background: 'lightgray',
+              overflow: 'auto',
+              padding: 'unset',
+              display: 'flex'
+            }}
+            aria-label="async virtualized listbox"
+            renderEmptyState={() => renderEmptyState({isLoading: list.isLoading})}>
+            <Collection items={list.items}>
+              {(item: Character) => (
+                <MyListBoxItem
+                  style={{
+                    backgroundColor: 'lightgrey',
+                    border: '1px solid black',
+                    boxSizing: 'border-box',
+                    height: '100%',
+                    width: '100%'
+                  }}
+                  id={item.name}>
+                  {item.name}
+                </MyListBoxItem>
+              )}
+            </Collection>
+            <MyListBoxLoaderIndicator isLoading={list.loadingState === 'loadingMore'} onLoadMore={list.loadMore} />
+          </ListBox>
+        </Virtualizer>
+      </div>
+    </AutocompleteWrapper>
+  );
+};
+
+AutocompleteWithAsyncListBox.story = {
+  args: {
+    delay: 50
+  }
+};

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -20,7 +20,8 @@ import {UNSTABLE_ListBoxLoadingSentinel} from '../src/ListBox';
 import {useAsyncList, useListData} from 'react-stately';
 
 export default {
-  title: 'React Aria Components'
+  title: 'React Aria Components',
+  excludeStories: ['MyListBoxLoaderIndicator', 'renderEmptyState']
 };
 
 export const ListBoxExample = (args) => (
@@ -435,7 +436,7 @@ export function VirtualizedListBoxWaterfall({minSize = 80, maxSize = 100}) {
   );
 }
 
-let renderEmptyState = ({isLoading}) => {
+export let renderEmptyState = ({isLoading}) => {
   return  (
     <div style={{height: 30, width: '100%'}}>
       {isLoading ? <LoadingSpinner style={{height: 20, width: 20, transform: 'translate(-50%, -50%)'}} /> : 'No results'}
@@ -450,7 +451,7 @@ interface Character {
   birth_year: number
 }
 
-const MyListBoxLoaderIndicator = (props) => {
+export const MyListBoxLoaderIndicator = (props) => {
   let {orientation, ...otherProps} = props;
   return (
     <UNSTABLE_ListBoxLoadingSentinel