feat: Async loading support for S2 ComboBox/Picker (#7938)

* initial support for async loading in Combobox/picker/listbox in RAC

* test against Listbox standalone and put on content size change issue

* update S2 CardView/RAC GridList for new useLoadMore

* fix v3 load more stories and tests

* update table to call useLoadMore internally

* first attempt at refactoring useLoadmore

* refactor useLoadMore to get rid of scroll handlers

* Add S2 Picker async support, support horizontal scrolling, fix types and data-attributes

* async support for S2 combobox

* fix lint and add horizontal scrolling story

* hack together async listbox virtualized example

* add loading spinners to RAC stories

* fix FF load more resizable wrapping container table, make s2 picker load more like v3

* update S2 Picker/Combobox so they are described by loading spinner

* fix Talkback and NVDA announcements for loading spinner

* clean up some todos

* set overflow to visible on ListLayout

* add useLoadMoreSentinel instead of changing useLoadMore

revert v3 components to still use old useLoadMore

* refactor useLoadMore and update RAC components load more

render a sentinel in the loading indicator always and call useLoadMoreSentinel from there instead. This allows the user to theoretically render as many sentinels as they want with each having its own loading state/logic

* add separator height to list layout

* change css for picker and combobox

* fix s2 combobox and picker

* fix separator height

* fix picker's separator

* cleanup

* update yarn lock

* update S2 CardView and TableView for new loading sentinel refactor

* fix lint

* remove workflow dependency

* remove style from s1 theme oops

* fix lint

* picker fixes

* picker cleanup

* fix lint

* fix line height in header

* properly persist table loading spinner in virtualized case

* fix listbox and gridlist persisted sentinel and fix double spinners

* stray console log

* fix react 19 tests

* fix lint?

* persist sentinel in card layouts

* forgot to fix waterfall empty state

* get rid of extranous space when listbox/table loaded all of the available items

* fix empty state for S2 ComboBox and make sure S2 Picker doesnt open when empty

* fix scroll offset issue after loadMore operations finish in virtualized components

works for the most part but is problematic if you dont want the loadingRow to appear with performing initial load (aka loadingState = loading). Due to how useLoadMoreSentinel work, we need to reobserve the list when we go from loading to loadingMore, but is isLoading is true the layout willpreserve room for the loading row...

* dont reserve room for the isLoadingMore spinner if performing initial load

also fixes RAC examples by properly applying a height to the tablebody if performing initial load

* add translations and clean up

* get rid of flex: none since loader is part of virtualized collection

was only needed when rendering the loader after the virutalizer div

* fix lint

* update grid areas and fix edgeToText

* prevent the empty w/ loading sentinel select from opening on arrow down

* adding chromatic tests for S2 Combobox/Picker async loading

* making sure sentinel is rendered even when empty

for cases like Listbox in Combobox, the content area is actually 0 since we dont have a height on the listbox nor does it reserve room like table layout

* update gridlist stories so that it is easier to see useLoadMore is only called once per load

due to the number of items returned by the star wars api and the height of the rows, making the gridlist too tall causes the loadmore to be called multiple times in order to fill enough content for a single page

* add gridlist tests for loadmore

* fix install?

* fix sizes

* fix lint

* update ScrollView to fix ComboBox tests

the issue was that updateSize was being called before the listboxref was attached due to it being immediatelly called in the test. The change makes it so the updateSize is called in the next render instead

* refactor to use collection instead of isLoading in useLoadMoreSentinel

this allows us to only have one prop in the sentinel to control visiblility of the loader while still calling loadMore when the collection changes. Also gives the added benefit of causing load more to happen if items are deleted from the collection

* update getItemCount so it doesnt include loaders in custom announcements

* make sure listbox doesnt add extranous padding above the empty state when empty or loading

since we are now rendering the virtualizer body if there is a loading sentinel, we dont want to add padding to the body rect calc since that will push the renderEmpty node down. Not a problem in TableLayout it seems

* add listbox and table tests

* fix delay when opening many items S2 select

* sorta get selected item to scroll into view virtualized

* fix tests

* cleanup fix lint

* more cleanup

* fix picker tests

* fix collection index incrementing when performing insertBefore

previously was only checking elements in the collection  after the loading spinner node, thus items loaded async into the collection all remained with incorrect index, resulting in incorrect aria-rowIndex

* fix tests and lint

* update test-util dev dep in S2 so 16/17 tests pass

* forgot yarn lock change

* fix overflow on windows potentially...

* fix rowindex calculation when filtering async s2 combobox

the document didnt seem to be both updating its _minInvalidChildIndex nor updating its child indicies properly when the combobox list was filtered async (aka the collection got new items added and removed via insertBefore and/or removeChild. Additionally, we didnt see to ever call updateChildIndices on the Document other than the first time the collection loaded

* make S2 picker button not throw warning when rending in fake DOM

* fix s2 picker scroll selected item into view

* fix lint

* clean up and add row index tests for GridList and Table

* small improvements from testing session

* update yarn lock

* remove comment

* review comments

* missed yarn.lock conflict

* fix picker test

* mixed up which react-dom dep to remove derp

* fix Combobox test so it properly catches previous Document bug

tested with the Document changes removed and verified that the test fails properly. Swore it failed when I first wrote it...

* fix cases where extra separators appeared on combobox filter/if load sentinel is present

* marking the document as dirty when _minInvalidChildIndex is changing

* get rid of extra todos and obsolte test

---------

Co-authored-by: Yihui Liao <[email protected]>

Author: LFDanLu

package.json

@@ -113,6 +113,7 @@
     "@storybook/addon-themes": "^7.6.19",
     "@storybook/api": "^7.6.19",
     "@storybook/components": "^7.6.19",
+    "@storybook/jest": "^0.2.3",
     "@storybook/manager-api": "^7.6.19",
     "@storybook/preview": "^7.6.19",
     "@storybook/preview-api": "^7.6.19",

packages/@react-aria/collections/src/CollectionBuilder.tsx

@@ -157,9 +157,9 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
   return <Type ref={itemRef}>{children}</Type>;
 }
 
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
-export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement): (props: P & React.RefAttributes<any>) => ReactElement | null {
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let focusableProps = useContext(FocusableContext);
@@ -190,7 +190,7 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
   return Result;
 }
 
-export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
+export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let children = useChildren(props);

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

@@ -103,8 +103,9 @@ export class BaseNode<T> {
   }
 
   private invalidateChildIndices(child: ElementNode<T>): void {
-    if (this._minInvalidChildIndex == null || child.index < this._minInvalidChildIndex.index) {
+    if (this._minInvalidChildIndex == null || !this._minInvalidChildIndex.isConnected || child.index < this._minInvalidChildIndex.index) {
       this._minInvalidChildIndex = child;
+      this.ownerDocument.markDirty(this);
     }
   }
 
@@ -156,8 +157,11 @@ export class BaseNode<T> {
 
     newNode.nextSibling = referenceNode;
     newNode.previousSibling = referenceNode.previousSibling;
-    newNode.index = referenceNode.index;
-
+    // Ensure that the newNode's index is less than that of the reference node so that
+    // invalidateChildIndices will properly use the newNode as the _minInvalidChildIndex, thus making sure
+    // we will properly update the indexes of all sibiling nodes after the newNode. The value here doesn't matter
+    // since updateChildIndices should calculate the proper indexes.
+    newNode.index = referenceNode.index - 1;
     if (this.firstChild === referenceNode) {
       this.firstChild = newNode;
     } else if (referenceNode.previousSibling) {
@@ -167,7 +171,7 @@ export class BaseNode<T> {
     referenceNode.previousSibling = newNode;
     newNode.parentNode = referenceNode.parentNode;
 
-    this.invalidateChildIndices(referenceNode);
+    this.invalidateChildIndices(newNode);
     if (this.isConnected) {
       this.ownerDocument.queueUpdate();
     }
@@ -177,7 +181,7 @@ export class BaseNode<T> {
     if (child.parentNode !== this || !this.ownerDocument.isMounted) {
       return;
     }
-    
+
     if (child.nextSibling) {
       this.invalidateChildIndices(child.nextSibling);
       child.nextSibling.previousSibling = child.previousSibling;
@@ -285,7 +289,7 @@ export class ElementNode<T> extends BaseNode<T> {
       this.node = this.node.clone();
       this.isMutated = true;
     }
-    
+
     this.ownerDocument.markDirty(this);
     return this.node;
   }
@@ -505,7 +509,7 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
     if (this.dirtyNodes.size === 0 || this.queuedRender) {
       return;
     }
-    
+
     // Only trigger subscriptions once during an update, when the first item changes.
     // React's useSyncExternalStore will call getCollection immediately, to check whether the snapshot changed.
     // If so, React will queue a render to happen after the current commit to our fake DOM finishes.

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

@@ -45,8 +45,11 @@ export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
 export {useLoadMore} from './useLoadMore';
+export {UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
 export {isCtrlKeyPressed} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
+
+export type {LoadMoreSentinelProps} from './useLoadMoreSentinel';

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

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {AsyncLoadable, Collection, Node} from '@react-types/shared';
+import {getScrollParent} from './getScrollParent';
+import {RefObject, useRef} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+import {useLayoutEffect} from './useLayoutEffect';
+
+export interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'> {
+  collection: Collection<Node<unknown>>,
+  /**
+   * The amount of offset from the bottom of your scrollable region that should trigger load more.
+   * Uses a percentage value relative to the scroll body's client height. Load more is then triggered
+   * when your current scroll position's distance from the bottom of the currently loaded list of items is less than
+   * or equal to the provided value. (e.g. 1 = 100% of the scroll region's height).
+   * @default 1
+   */
+  scrollOffset?: number
+}
+
+export function UNSTABLE_useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject<HTMLElement | null>): void {
+  let {collection, onLoadMore, scrollOffset = 1} = props;
+
+  let sentinelObserver = useRef<IntersectionObserver>(null);
+
+  let triggerLoadMore = useEffectEvent((entries: IntersectionObserverEntry[]) => {
+    // Use "isIntersecting" over an equality check of 0 since it seems like there is cases where
+    // a intersection ratio of 0 can be reported when isIntersecting is actually true
+    for (let entry of entries) {
+      // Note that this will be called if the collection changes, even if onLoadMore was already called and is being processed.
+      // Up to user discretion as to how to handle these multiple onLoadMore calls
+      if (entry.isIntersecting && onLoadMore) {
+        onLoadMore();
+      }
+    }
+  });
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      // Tear down and set up a new IntersectionObserver when the collection changes so that we can properly trigger additional loadMores if there is room for more items
+      // Need to do this tear down and set up since using a large rootMargin will mean the observer's callback isn't called even when scrolling the item into view beause its visibility hasn't actually changed
+      // https://codesandbox.io/p/sandbox/magical-swanson-dhgp89?file=%2Fsrc%2FApp.js%3A21%2C21
+      sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {root: getScrollParent(ref?.current) as HTMLElement, rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`});
+      sentinelObserver.current.observe(ref.current);
+    }
+
+    return () => {
+      if (sentinelObserver.current) {
+        sentinelObserver.current.disconnect();
+      }
+    };
+  }, [collection, triggerLoadMore, ref, scrollOffset]);
+}

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -98,7 +98,6 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // Prevent rubber band scrolling from shaking when scrolling out of bounds
       state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
       state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
-
       onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
 
       if (!state.isScrolling) {
@@ -199,6 +198,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
 
   // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
   let lastContentSize = useRef<Size | null>(null);
+  let [update, setUpdate] = useState({});
   useLayoutEffect(() => {
     if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
       // React doesn't allow flushSync inside effects, so queue a microtask.
@@ -209,7 +209,11 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // https://github.com/reactwg/react-18/discussions/102
       // @ts-ignore
       if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
-        updateSize(fn => fn());
+        // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs
+        // due to strict mode.
+        setUpdate({});
+        lastContentSize.current = contentSize;
+        return;
       } else {
         queueMicrotask(() => updateSize(flushSync));
       }
@@ -218,6 +222,11 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     lastContentSize.current = contentSize;
   });
 
+  // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
+  useLayoutEffect(() => {
+    updateSize(fn => fn());
+  }, [update]);
+
   let onResize = useCallback(() => {
     updateSize(flushSync);
   }, [updateSize]);

packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx

@@ -10,15 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
+import {AsyncComboBoxStory, ContextualHelpExample, CustomWidth, Dynamic, EmptyCombobox, Example, Sections, WithIcons} from '../stories/ComboBox.stories';
 import {ComboBox} from '../src';
-import {ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/ComboBox.stories';
+import {expect} from '@storybook/jest';
 import type {Meta, StoryObj} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 const meta: Meta<typeof ComboBox<any>> = {
   component: ComboBox,
   parameters: {
-    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true},
+    chromatic: {ignoreSelectors: ['[role="progressbar"]']}
   },
   tags: ['autodocs'],
   title: 'S2 Chromatic/ComboBox'
@@ -69,3 +71,89 @@ export const WithCustomWidth = {
   ...CustomWidth,
   play: async (context) => await Static.play!(context)
 } as StoryObj;
+
+export const WithEmptyState = {
+  ...EmptyCombobox,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let listbox = await within(body).findByRole('listbox');
+    await within(listbox).findByText('No results');
+  }
+};
+
+export const WithInitialLoading = {
+  ...EmptyCombobox,
+  args: {
+    loadingState: 'loading',
+    label: 'Initial loading'
+  },
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let listbox = await within(body).findByRole('listbox');
+    await within(listbox).findByText('Loading', {exact: false});
+  }
+};
+
+export const WithLoadMore = {
+  ...Example,
+  args: {
+    loadingState: 'loadingMore',
+    label: 'Loading more'
+  },
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let listbox = await within(body).findByRole('listbox');
+    await within(listbox).findByRole('progressbar');
+  }
+};
+
+export const AsyncResults = {
+  ...AsyncComboBoxStory,
+  args: {
+    ...AsyncComboBoxStory.args,
+    delay: 2000
+  },
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let listbox = await within(body).findByRole('listbox');
+    await waitFor(() => {
+      expect(within(listbox).getByText('Luke', {exact: false})).toBeInTheDocument();
+    }, {timeout: 5000});
+  }
+};
+
+export const Filtering = {
+  ...AsyncComboBoxStory,
+  args: {
+    ...AsyncComboBoxStory.args,
+    delay: 2000
+  },
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let listbox = await within(body).findByRole('listbox');
+    await waitFor(() => {
+      expect(within(listbox).getByText('Luke', {exact: false})).toBeInTheDocument();
+    }, {timeout: 5000});
+
+    let combobox = await within(body).findByRole('combobox');
+    await userEvent.type(combobox, 'R2');
+
+    await waitFor(() => {
+      expect(within(body).getByRole('progressbar', {hidden: true})).toBeInTheDocument();
+    }, {timeout: 5000});
+
+    await waitFor(() => {
+      expect(within(listbox).queryByRole('progressbar', {hidden: true})).toBeFalsy();
+    }, {timeout: 5000});
+  }
+};

packages/@react-spectrum/s2/chromatic/Picker.stories.tsx

@@ -10,15 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/Picker.stories';
+import {AsyncPickerStory, ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/Picker.stories';
+import {expect} from '@storybook/jest';
 import type {Meta, StoryObj} from '@storybook/react';
 import {Picker} from '../src';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 const meta: Meta<typeof Picker<any>> = {
   component: Picker,
   parameters: {
-    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true},
+    chromatic: {ignoreSelectors: ['[role="progressbar"]']}
   },
   tags: ['autodocs'],
   title: 'S2 Chromatic/Picker'
@@ -68,3 +70,58 @@ export const ContextualHelp = {
   }
 };
 
+export const EmptyAndLoading = {
+  render: () => (
+    <Picker label="loading" isLoading>
+      {[]}
+    </Picker>
+  ),
+  play: async ({canvasElement}) => {
+    let body = canvasElement.ownerDocument.body;
+    await waitFor(() => {
+      expect(within(body).getByRole('progressbar', {hidden: true})).toBeInTheDocument();
+    }, {timeout: 5000});
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(within(body).queryByRole('listbox')).toBeFalsy();
+  }
+};
+
+export const AsyncResults = {
+  ...AsyncPickerStory,
+  args: {
+    ...AsyncPickerStory.args,
+    delay: 2000
+  },
+  play: async ({canvasElement}) => {
+    let body = canvasElement.ownerDocument.body;
+    await waitFor(() => {
+      expect(within(body).getByRole('progressbar', {hidden: true})).toBeInTheDocument();
+    }, {timeout: 5000});
+    await userEvent.tab();
+
+    await waitFor(() => {
+      expect(within(body).queryByRole('progressbar', {hidden: true})).toBeFalsy();
+    }, {timeout: 5000});
+
+    await userEvent.keyboard('{ArrowDown}');
+    let listbox = await within(body).findByRole('listbox');
+    await waitFor(() => {
+      expect(within(listbox).getByText('Luke', {exact: false})).toBeInTheDocument();
+    }, {timeout: 5000});
+
+    await waitFor(() => {
+      expect(within(listbox).getByRole('progressbar', {hidden: true})).toBeInTheDocument();
+    }, {timeout: 5000});
+
+    await waitFor(() => {
+      expect(within(listbox).queryByRole('progressbar', {hidden: true})).toBeFalsy();
+    }, {timeout: 5000});
+
+    await userEvent.keyboard('{PageDown}');
+
+    await waitFor(() => {
+      expect(within(listbox).getByText('Greedo', {exact: false})).toBeInTheDocument();
+    }, {timeout: 5000});
+  }
+};