feat: Tree multiple level loading support and only count "items" for collection size (#8349)

* Update tree and listlayout to handle multi loaders

* adapting other stories to new loader api and adding useAsync example story

* add tests

* fix story for correctness, should only need to provide a dependecy at the top most collection

* restoring focus back to the tree if the user was focused on the loader

* fixing estimated loader position if sections exist

taken from #8326

* skip test for now

* revert loader keyboard focus specific logic

* pulling over relevant code from focus_loading_spinners

* modify tree to return item count when querying size

* update TableCollection to return just the number of rows as size

also the aria row index and pos in set from empty/isLoading state wrapper since it might be confusing to hear that there are items when the table/tree is empty

* update other collection components to leverage item only count

* clean up

* properly prevent picker from opening where there arent items

* fix lint

* review comments

* review comments

* making the async stories not load forever

* docs: Async load more documentation for RAC  (#8431)

* add docs for gridlist

* add async loading docs for GridList and Listbox adjacent components

* add docs example for table

* add prop tables

* rename sentinel component and add prop tables

* adding tree docs for loading spinners

* fix docs lint

* typo and left over stuff

* export the loadMoreItem props from the monopackage

* review comments

* fix the tree example in docs

* review comments

* review comments

* forgot to remove a delay

* review comments

Author: LFDanLu

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

@@ -79,9 +79,10 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   private firstKey: Key | null = null;
   private lastKey: Key | null = null;
   private frozen = false;
+  private itemCount: number = 0;
 
   get size(): number {
-    return this.keyMap.size;
+    return this.itemCount;
   }
 
   getKeys(): IterableIterator<Key> {
@@ -184,6 +185,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     collection.keyMap = new Map(this.keyMap);
     collection.firstKey = this.firstKey;
     collection.lastKey = this.lastKey;
+    collection.itemCount = this.itemCount;
     return collection;
   }
 
@@ -192,6 +194,10 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
       throw new Error('Cannot add a node to a frozen collection');
     }
 
+    if (node.type === 'item' && this.keyMap.get(node.key) == null) {
+      this.itemCount++;
+    }
+
     this.keyMap.set(node.key, node);
   }
 
@@ -200,6 +206,11 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
       throw new Error('Cannot remove a node to a frozen collection');
     }
 
+    let node = this.keyMap.get(key);
+    if (node != null && node.type === 'item') {
+      this.itemCount--;
+    }
+
     this.keyMap.delete(key);
   }
 

packages/@react-aria/gridlist/package.json

@@ -32,7 +32,6 @@
     "@react-aria/interactions": "^3.25.3",
     "@react-aria/selection": "^3.24.3",
     "@react-aria/utils": "^3.29.1",
-    "@react-stately/collections": "^3.12.5",
     "@react-stately/list": "^3.12.3",
     "@react-stately/tree": "^3.9.0",
     "@react-types/shared": "^3.30.0",

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -13,7 +13,6 @@
 import {chain, getScrollParent, mergeProps, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, Key, RefObject, Node as RSNode} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {getLastItem} from '@react-stately/collections';
 import {getRowId, listMap} from './utils';
 import {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, useRef} from 'react';
 import {isFocusVisible} from '@react-aria/interactions';
@@ -104,13 +103,14 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     if (node.level > 0 && node?.parentKey != null) {
       let parent = state.collection.getItem(node.parentKey);
       if (parent) {
-        // siblings must exist because our original node exists, same with lastItem
+        // siblings must exist because our original node exists
         let siblings = state.collection.getChildren?.(parent.key)!;
-        setSize = getLastItem(siblings)!.index + 1;
+        setSize = [...siblings].filter(row => row.type === 'item').length;
       }
     } else {
-      setSize = ([...state.collection].filter(row => row.level === 0).at(-1)?.index ?? 0) + 1;
+      setSize = [...state.collection].filter(row => row.level === 0 && row.type === 'item').length;
     }
+
     treeGridRowProps = {
       'aria-expanded': isExpanded,
       'aria-level': node.level + 1,

packages/@react-aria/utils/src/index.ts

@@ -45,7 +45,7 @@ export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
 export {useLoadMore} from './useLoadMore';
-export {UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
+export {useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
 export {isCtrlKeyPressed} from './keyboard';

packages/@react-aria/utils/src/useLoadMoreSentinel.ts

@@ -28,7 +28,7 @@ export interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'>
   scrollOffset?: number
 }
 
-export function UNSTABLE_useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject<HTMLElement | null>): void {
+export function useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject<HTMLElement | null>): void {
   let {collection, onLoadMore, scrollOffset = 1} = props;
 
   let sentinelObserver = useRef<IntersectionObserver>(null);

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -1844,7 +1844,7 @@ describe('SearchAutocomplete', function () {
       expect(() => within(tray).getByText('No results')).toThrow();
     });
 
-    it.skip('user can select options by pressing them', async function () {
+    it('user can select options by pressing them', async function () {
       let {getByRole, getByText, getByTestId} = renderSearchAutocomplete();
       let button = getByRole('button');
 
@@ -1892,7 +1892,7 @@ describe('SearchAutocomplete', function () {
       expect(items[1]).toHaveAttribute('aria-selected', 'true');
     });
 
-    it.skip('user can select options by focusing them and hitting enter', async function () {
+    it('user can select options by focusing them and hitting enter', async function () {
       let {getByRole, getByText, getByTestId} = renderSearchAutocomplete();
       let button = getByRole('button');
 

packages/@react-spectrum/s2/src/CardView.tsx

@@ -16,9 +16,9 @@ import {
   ContextValue,
   GridLayout,
   GridListItem,
+  GridListLoadMoreItem,
   GridListProps,
   Size,
-  UNSTABLE_GridListLoadingSentinel,
   Virtualizer,
   WaterfallLayout
 } from 'react-aria-components';
@@ -246,7 +246,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   let renderer;
   let cardLoadingSentinel = (
-    <UNSTABLE_GridListLoadingSentinel
+    <GridListLoadMoreItem
       onLoadMore={onLoadMore} />
   );
 

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -24,12 +24,12 @@ import {
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
+  ListBoxLoadMoreItem,
   ListBoxProps,
   ListLayout,
   ListStateContext,
   Provider,
   SectionProps,
-  UNSTABLE_ListBoxLoadingSentinel,
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
@@ -542,7 +542,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
 
   let renderer;
   let listBoxLoadingCircle = (
-    <UNSTABLE_ListBoxLoadingSentinel
+    <ListBoxLoadMoreItem
       // Only show the spinner in the list when loading more
       isLoading={loadingState === 'loadingMore'}
       onLoadMore={onLoadMore}
@@ -553,7 +553,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
         styles={progressCircleStyles({size})}
         // Same loading string as table
         aria-label={stringFormatter.format('table.loadingMore')} />
-    </UNSTABLE_ListBoxLoadingSentinel>
+    </ListBoxLoadMoreItem>
   );
 
   if (typeof children === 'function') {

packages/@react-spectrum/s2/src/Picker.tsx

@@ -23,12 +23,12 @@ import {
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
+  ListBoxLoadMoreItem,
   ListBoxProps,
   ListLayout,
   Provider,
   SectionProps,
   SelectValue,
-  UNSTABLE_ListBoxLoadingSentinel,
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
@@ -307,12 +307,12 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
   let spinnerId = useSlotId([showButtonSpinner]);
 
   let listBoxLoadingCircle = (
-    <UNSTABLE_ListBoxLoadingSentinel
+    <ListBoxLoadMoreItem
       className={loadingWrapperStyles}
       isLoading={loadingState === 'loadingMore'}
       onLoadMore={onLoadMore}>
       <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />
-    </UNSTABLE_ListBoxLoadingSentinel>
+    </ListBoxLoadMoreItem>
   );
 
   if (typeof children === 'function' && items) {

packages/@react-spectrum/s2/src/TableView.tsx

@@ -38,8 +38,8 @@ import {
   RowRenderProps,
   TableBodyRenderProps,
   TableLayout,
+  TableLoadMoreItem,
   TableRenderProps,
-  UNSTABLE_TableLoadingSentinel,
   useSlottedContext,
   useTableOptions,
   Virtualizer
@@ -196,11 +196,10 @@ export class S2TableLayout<T> extends TableLayout<T> {
     if (!header) {
       return [];
     }
-    let {children, layoutInfo} = body;
+    let {layoutInfo} = body;
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
-    // TODO: we may want to adjust RAC layouts to do something simlar? Current users of RAC table will probably run into something similar
-    let isEmptyOrLoading = children?.length === 0 || (children?.length === 1 && children[0].layoutInfo.type === 'loader');
+    let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
     if (isEmptyOrLoading) {
       layoutInfo.rect.width = this.virtualizer!.visibleRect.width - 80;
     }
@@ -219,19 +218,19 @@ export class S2TableLayout<T> extends TableLayout<T> {
     // If performing first load or empty, the body will be sticky so we don't want to apply sticky to the loader, otherwise it will
     // affect the positioning of the empty state renderer
     let collection = this.virtualizer!.collection;
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     layoutInfo.isSticky = !isEmptyOrLoading;
     return layoutNode;
   }
 
   // y is the height of the headers
   protected buildBody(y: number): LayoutNode {
     let layoutNode = super.buildBody(y);
-    let {children, layoutInfo} = layoutNode;
+    let {layoutInfo} = layoutNode;
     // Needs overflow for sticky loader
     layoutInfo.allowOverflow = true;
     // If loading or empty, we'll want the body to be sticky and centered
-    let isEmptyOrLoading = children?.length === 0 || (children?.length === 1 && children[0].layoutInfo.type === 'loader');
+    let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
     if (isEmptyOrLoading) {
       layoutInfo.rect = new Rect(40, 40, this.virtualizer!.visibleRect.width - 80, this.virtualizer!.visibleRect.height - 80);
       layoutInfo.isSticky = true;
@@ -390,13 +389,13 @@ export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   // This is because we don't distinguish between loadingMore and loading in the layout, resulting in a different rect being used to build the body. Perhaps can be considered as a user error
   // if they pass loadingMore without having any other items in the table. Alternatively, could update the layout so it knows the current loading state.
   let loadMoreSpinner = (
-    <UNSTABLE_TableLoadingSentinel isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full'})}>
+    <TableLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full'})}>
       <div className={centeredWrapper}>
         <ProgressCircle
           isIndeterminate
           aria-label={stringFormatter.format('table.loadingMore')} />
       </div>
-    </UNSTABLE_TableLoadingSentinel>
+    </TableLoadMoreItem>
   );
 
   // If the user is rendering their rows in dynamic fashion, wrap their render function in Collection so we can inject