fix: CardView skeleton loading should appear even if renderEmptyState is provided (#8603)

Author: LFDanLu

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

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {CardView, Content, Heading, IllustratedMessage} from '../src';
+import {CardView, Content, Heading, IllustratedMessage, SkeletonCollection} from '../src';
 import EmptyIcon from '../spectrum-illustrations/gradient/generic1/Image';
 import type {Meta, StoryObj} from '@storybook/react';
+import {PhotoCard} from '../stories/CardView.stories';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof CardView> = {
@@ -49,3 +50,36 @@ export const Empty: StoryObj<typeof CardView> = {
     </CardView>
   )
 };
+
+export const Loading: StoryObj<typeof CardView> = {
+  render: (args) => (
+    <CardView
+      aria-label="Assets"
+      loadingState="loading"
+      styles={cardViewStyles}
+      renderEmptyState={() => (
+        <IllustratedMessage size="L">
+          <EmptyIcon />
+          <Heading>Create your first asset.</Heading>
+          <Content>Get started by uploading or importing some assets.</Content>
+        </IllustratedMessage>
+      )}
+      {...args}>
+      <SkeletonCollection>
+        {() => (
+          <PhotoCard
+            layout="grid"
+            item={{
+              id: Math.random(),
+              user: {name: 'Devon Govett', profile_image: {small: ''}},
+              urls: {regular: ''},
+              description: 'This is a fake description. Kinda long so it wraps to a new line.',
+              alt_description: '',
+              width: 400,
+              height: 200 + Math.max(0, Math.round(Math.random() * 400))
+            }} />
+        )}
+      </SkeletonCollection>
+    </CardView>
+  )
+};

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

@@ -203,8 +203,10 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     UNSAFE_className = '',
     UNSAFE_style,
     styles,
+    loadingState,
     onLoadMore,
     items,
+    renderEmptyState,
     ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let innerRef = useRef(null);
@@ -244,9 +246,11 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let renderer;
   let cardLoadingSentinel = (
     <GridListLoadMoreItem
+      isLoading={isLoading}
       onLoadMore={onLoadMore} />
   );
 
@@ -276,6 +280,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
             <AriaGridList
               ref={scrollRef}
               {...otherProps}
+              renderEmptyState={!isLoading ? renderEmptyState : undefined}
               items={items}
               layout="grid"
               selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}

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

@@ -44,7 +44,7 @@ const meta: Meta<typeof CardView> = {
   args: {
     onLoadMore: fn()
   },
-  excludeStories: ['ExampleRender']
+  excludeStories: ['ExampleRender', 'PhotoCard']
 };
 
 export default meta;
@@ -78,7 +78,7 @@ const avatarSize = {
   XL: 32
 } as const;
 
-function PhotoCard({item, layout}: {item: Item, layout: string}) {
+export function PhotoCard({item, layout}: {item: Item, layout: string}) {
   return (
     <Card id={item.id} textValue={item.description || item.alt_description}>
       {({size}) => (<>

packages/@react-stately/layout/src/GridLayout.ts

@@ -122,9 +122,11 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
 
     let collection = this.virtualizer!.collection;
     // Make sure to set rows to 0 if we performing a first time load or are rendering the empty state so that Virtualizer
-    // won't try to render its body
-    let isEmptyOrLoading = collection?.size === 0;
-    let rows = isEmptyOrLoading ? 0 : Math.ceil(collection.size / numColumns);
+    // won't try to render its body. If we detect a skeleton as the first item, then we want to render the skeleton items in place of
+    // the renderEmptyState.
+    let isSkeletonLoading = collection.getItem(collection.getFirstKey()!)?.type === 'skeleton';
+    let isEmptyOrLoading = collection?.size === 0 && !isSkeletonLoading;
+    let rows = isEmptyOrLoading ? 0 : Math.ceil(isSkeletonLoading ? 1 : collection.size / numColumns);
     let iterator = collection[Symbol.iterator]();
     let y = rows > 0 ? minSpace.height : 0;
     let newLayoutInfos = new Map();

packages/@react-stately/layout/src/WaterfallLayout.ts

@@ -169,8 +169,9 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       newLayoutInfos.set(lastNode.key, layoutInfo);
     }
 
-    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render
-    let isEmptyOrLoading = collection?.size === 0;
+    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
+    // except if we are performing skeleton loading
+    let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';
     let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
     this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
     this.layoutInfos = newLayoutInfos;