fix: do not dispatch loadMore if hook is still in loading state (#8571)

* do not dispatch loadMore if hook is still in loading state

* fix lint

* fis lint

* add test

---------

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

Author: 3 people

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

@@ -11,7 +11,23 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionButton, Cell, Column, Content, Heading, IllustratedMessage, Link, MenuItem, MenuSection, Row, TableBody, TableHeader, TableView, TableViewProps, Text} from '../src';
+import {
+  ActionButton,
+  Cell,
+  Column,
+  Content,
+  Heading,
+  IllustratedMessage,
+  Link,
+  MenuItem,
+  MenuSection,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+  TableViewProps,
+  Text
+} from '../src';
 import {categorizeArgTypes} from './utils';
 import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';

packages/@react-stately/data/src/useAsyncList.ts

@@ -339,7 +339,7 @@ export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): As
     },
     loadMore() {
       // Ignore if already loading more or if performing server side filtering.
-      if (data.state === 'loadingMore' || data.state === 'filtering' || data.cursor == null) {
+      if (data.state === 'loading' || data.state === 'loadingMore' || data.state === 'filtering' || data.cursor == null) {
         return;
       }
 

packages/@react-stately/data/test/useAsyncList.test.js

@@ -334,6 +334,56 @@ describe('useAsyncList', () => {
     expect(result.current.items).toEqual(ITEMS);
   });
 
+  it('should prevent loadMore from firing if in the middle of a load', async () => {
+    let load = jest.fn().mockImplementation(getItems);
+    let {result} = renderHook(
+      () => useAsyncList({load})
+    );
+
+    expect(load).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+
+    await act(async () => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.items).toEqual(ITEMS);
+
+    await act(async () => {
+      result.current.reload();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.items).toEqual(ITEMS);
+  });
+
+
   it('should ignore duplicate loads where first resolves first', async () => {
     let load = jest.fn().mockImplementation(getItems2);
     let sort = jest.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({items: ITEMS2}), 100)));