ListView loading spinner height fix (#2795)

* fixing loading spinner height in ListView and adding loading support

* adding tests and fixing lint

* fixing css

* updating test to use less parentNode

Author: LFDanLu

packages/@react-spectrum/list/src/ListView.tsx

@@ -11,6 +11,7 @@
  */
 import {
   AriaLabelingProps,
+  AsyncLoadable,
   CollectionBase,
   DOMProps,
   DOMRef,
@@ -55,20 +56,22 @@ const ROW_HEIGHTS = {
 export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>['density']) {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
+  let isEmpty = state.collection.size === 0;
   let layout = useMemo(() =>
       new ListLayout<T>({
         estimatedRowHeight: ROW_HEIGHTS[density][scale],
         padding: 0,
-        collator
+        collator,
+        loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
       })
-    , [collator, scale, density]);
+    , [collator, scale, density, isEmpty]);
 
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
 
-interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps {
+interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps, Omit<AsyncLoadable, 'isLoading'> {
   /**
    * Sets the amount of vertical padding within each cell.
    * @default 'regular'
@@ -84,6 +87,7 @@ interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProp
 function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
+    onLoadMore,
     loadingState,
     isQuiet,
     transitionDuration = 0,
@@ -92,6 +96,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   let domRef = useDOMRef(ref);
   let {collection} = useListState(props);
   let formatMessage = useMessageFormatter(intlMessages);
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
   let {styleProps} = useStyleProps(props);
   let {direction} = useLocale();
@@ -138,7 +143,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   }, state, domRef);
 
   // Sync loading state into the layout.
-  layout.isLoading = loadingState === 'loading';
+  layout.isLoading = isLoading;
 
   let focusedKey = state.selectionManager.focusedKey;
   let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
@@ -151,6 +156,8 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
       <Virtualizer
         {...gridProps}
         {...styleProps}
+        isLoading={isLoading}
+        onLoadMore={onLoadMore}
         ref={domRef}
         focusedKey={focusedKey}
         scrollDirection="vertical"
@@ -208,7 +215,14 @@ function CenteredWrapper({children}) {
     <div
       role="row"
       aria-rowindex={state.collection.size + 1}
-      className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper')}>
+      className={
+        classNames(
+          listStyles,
+          'react-spectrum-ListView-centeredWrapper',
+          {
+            'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0
+          }
+        )}>
       <div role="gridcell">
         {children}
       </div>

packages/@react-spectrum/list/src/listview.css

@@ -60,7 +60,7 @@
       }
 
       /* avoid double border for adjacent selected items */
-      &.is-previous-selected {        
+      &.is-previous-selected {
         &:not(.is-focused) {
           border-top-color: transparent;
         }
@@ -108,7 +108,7 @@
     ;
     align-items: center;
   }
-  
+
   .react-spectrum-ListViewItem-checkbox {
     grid-area: checkbox;
     align-items: center;
@@ -161,7 +161,7 @@
     grid-area: chevron;
     padding-inline-start: var(--spectrum-global-dimension-size-75);
   }
-  
+
   /* give first and last items border-radius to match listview container */
   div:first-child > div[role="row"] > & {
     border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
@@ -191,5 +191,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+  &.react-spectrum-ListView-centeredWrapper--loadingMore {
+    padding-top: var(--spectrum-global-dimension-size-50);
+  }
 }
-

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -18,7 +18,7 @@ import MoreSmall from '@spectrum-icons/workflow/MoreSmall';
 import NoSearchResults from '@spectrum-icons/illustrations/src/NoSearchResults';
 import React, {useEffect, useState} from 'react';
 import {storiesOf} from '@storybook/react';
-
+import {useAsyncList} from '@react-stately/data';
 
 function renderEmptyState() {
   return (
@@ -118,6 +118,16 @@ storiesOf('ListView', module)
       {[]}
     </ListView>
   ))
+  .add('loadingMore', () => (
+    <ListView width="300px" height="300px" loadingState="loadingMore">
+      <Item textValue="row 1">row 1</Item>
+      <Item textValue="row 2">row 2</Item>
+      <Item textValue="row 3">row 3</Item>
+    </ListView>
+  ))
+  .add('async listview loading', () => (
+    <AsyncList />
+  ))
   .add('density: compact', () => (
     <ListView width="250px" density="compact">
       <Item textValue="row 1">row 1</Item>
@@ -350,3 +360,41 @@ function EmptyTest() {
     </div>
   );
 }
+
+function AsyncList() {
+  interface StarWarsChar {
+    name: string,
+    url: string
+  }
+
+  let list = useAsyncList<StarWarsChar>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      // Slow down load so progress circle can appear
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+  return (
+    <ListView
+      selectionMode="multiple"
+      aria-label="example async loading list"
+      width="size-6000"
+      height="size-3000"
+      items={list.items}
+      loadingState={list.loadingState}
+      onLoadMore={list.loadMore}>
+      {(item) => (
+        <Item key={item.name} textValue={item.name}>{item.name}</Item>
+      )}
+    </ListView>
+  );
+}

packages/@react-spectrum/list/test/ListView.test.js

@@ -282,9 +282,30 @@ describe('ListView', function () {
     });
   });
 
-  it('should display loading affordance', function () {
-    let {getByRole} = render(<ListView aria-label="List" loadingState="loading">{[]}</ListView>);
-    expect(getByRole('progressbar')).toBeTruthy();
+  it('should display loading affordance with proper height (isLoading)', function () {
+    let {getAllByRole} = render(<ListView aria-label="List" loadingState="loading">{[]}</ListView>);
+    let row = getAllByRole('row')[0];
+    expect(row.parentNode.style.height).toBe('1000px');
+    let progressbar = within(row).getByRole('progressbar');
+    expect(progressbar).toBeTruthy();
+  });
+
+  it('should display loading affordance with proper height (isLoadingMore)', function () {
+    let items = [
+      {key: 'foo', label: 'Foo'},
+      {key: 'bar', label: 'Bar'},
+      {key: 'baz', label: 'Baz'}
+    ];
+    let {getByRole} = render(
+      <ListView items={items} aria-label="List" loadingState="loadingMore">
+        {item =>
+          <Item textValue={item.key}>{item.label}</Item>
+        }
+      </ListView>
+    );
+    let progressbar = getByRole('progressbar');
+    expect(progressbar).toBeTruthy();
+    expect(progressbar.parentNode.parentNode.parentNode.style.height).toBe('40px');
   });
 
   it('should render empty state', function () {