DataViews: Add loading/no results message in grid view (#59002)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 20, 2024 · aeb7b43 · aeb7b43
1 parent 8c57e5c
commit aeb7b43
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	Tooltip,
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
@@ -128,6 +129,7 @@ export default function ViewGrid( {
 	fields,
 	view,
 	actions,
+	isLoading,
 	getItemId,
 	deferredRendering,
 	selection,
@@ -148,29 +150,45 @@ export default function ViewGrid( {
 	);
 	const shownData = useAsyncList( data, { step: 3 } );
 	const usedData = deferredRendering ? shownData : data;
+	const hasData = !! usedData?.length;
 	return (
-		<Grid
-			gap={ 6 }
-			columns={ 2 }
-			alignment="top"
-			className="dataviews-view-grid"
-		>
-			{ usedData.map( ( item ) => {
-				return (
-					<GridItem
-						key={ getItemId( item ) }
-						selection={ selection }
-						data={ data }
-						onSelectionChange={ onSelectionChange }
-						getItemId={ getItemId }
-						item={ item }
-						actions={ actions }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Grid>
+		<>
+			{ hasData && (
+				<Grid
+					gap={ 6 }
+					columns={ 2 }
+					alignment="top"
+					className="dataviews-view-grid"
+					aria-busy={ isLoading }
+				>
+					{ usedData.map( ( item ) => {
+						return (
+							<GridItem
+								key={ getItemId( item ) }
+								selection={ selection }
+								data={ data }
+								onSelectionChange={ onSelectionChange }
+								getItemId={ getItemId }
+								item={ item }
+								actions={ actions }
+								mediaField={ mediaField }
+								primaryField={ primaryField }
+								visibleFields={ visibleFields }
+							/>
+						);
+					} ) }
+				</Grid>
+			) }
+			{ ! hasData && (
+				<div
+					className={ classnames( {
+						'dataviews-loading': isLoading,
+						'dataviews-no-results': ! isLoading,
+					} ) }
+				>
+					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+				</div>
+			) }
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -111,6 +111,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 const selectThemePatterns = createSelector(
 	( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
+		const { getIsResolving } = select( coreStore );
 		const settings = getSettings();
 		const blockPatterns =
 			settings.__experimentalAdditionalBlockPatterns ??
@@ -136,19 +137,23 @@ const selectThemePatterns = createSelector(
 					__unstableSkipMigrationLogs: true,
 				} ),
 			} ) );
-
-		return { patterns, isResolving: false };
+		return { patterns, isResolving: getIsResolving( 'getBlockPatterns' ) };
 	},
 	( select ) => [
 		select( coreStore ).getBlockPatterns(),
+		select( coreStore ).getIsResolving( 'getBlockPatterns' ),
 		unlock( select( editSiteStore ) ).getSettings(),
 	]
 );
 
 const selectPatterns = createSelector(
 	( select, categoryId, syncStatus, search = '' ) => {
-		const { patterns: themePatterns } = selectThemePatterns( select );
-		const { patterns: userPatterns } = selectUserPatterns( select );
+		const {
+			patterns: themePatterns,
+			isResolving: isResolvingThemePatterns,
+		} = selectThemePatterns( select );
+		const { patterns: userPatterns, isResolving: isResolvingUserPatterns } =
+			selectUserPatterns( select );
 
 		let patterns = [
 			...( themePatterns || [] ),
@@ -176,7 +181,10 @@ const selectPatterns = createSelector(
 				hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
 			} );
 		}
-		return { patterns, isResolving: false };
+		return {
+			patterns,
+			isResolving: isResolvingThemePatterns || isResolvingUserPatterns,
+		};
 	},
 	( select ) => [
 		selectThemePatterns( select ),