DataViews: Render data async conditionally (#56851)

* DataViews: Render data async conditionally * rename to `deferredRendering`
WordPress · Dec 7, 2023 · 26a5d6d · 26a5d6d · github-actions · Dec 7, 2023
1 parent 40c233f
commit 26a5d6d
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 6 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -29,6 +29,7 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange,
+	deferredRendering,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 
@@ -82,6 +83,7 @@ export default function DataViews( {
 					isLoading={ isLoading }
 					onSelectionChange={ onSetSelection }
 					selection={ selection }
+					deferredRendering={ deferredRendering }
 				/>
 				<Pagination
 					view={ view }

diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
@@ -156,7 +156,10 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 									? view.hiddenFields.filter(
 											( id ) => id !== field.id
 									  )
-									: [ ...view.hiddenFields, field.id ],
+									: [
+											...( view.hiddenFields || [] ),
+											field.id,
+									  ],
 							} );
 						} }
 					>

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -14,7 +14,14 @@ import { useAsyncList } from '@wordpress/compose';
  */
 import ItemActions from './item-actions';
 
-export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
+export default function ViewGrid( {
+	data,
+	fields,
+	view,
+	actions,
+	getItemId,
+	deferredRendering,
+} ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -29,14 +36,15 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
 			)
 	);
 	const shownData = useAsyncList( data, { step: 3 } );
+	const usedData = deferredRendering ? shownData : data;
 	return (
 		<Grid
 			gap={ 8 }
 			columns={ 2 }
 			alignment="top"
 			className="dataviews-grid-view"
 		>
-			{ shownData.map( ( item, index ) => (
+			{ usedData.map( ( item, index ) => (
 				<VStack
 					spacing={ 3 }
 					key={ getItemId?.( item ) || index }

diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
@@ -20,8 +20,10 @@ export default function ViewList( {
 	getItemId,
 	onSelectionChange,
 	selection,
+	deferredRendering,
 } ) {
 	const shownData = useAsyncList( data, { step: 3 } );
+	const usedData = deferredRendering ? shownData : data;
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -45,7 +47,7 @@ export default function ViewList( {
 
 	return (
 		<ul className="dataviews-list-view">
-			{ shownData.map( ( item, index ) => {
+			{ usedData.map( ( item, index ) => {
 				return (
 					<li key={ getItemId?.( item ) || index }>
 						<div

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -340,6 +340,7 @@ function ViewTable( {
 	getItemId,
 	isLoading = false,
 	paginationInfo,
+	deferredRendering,
 } ) {
 	const columns = useMemo( () => {
 		const _columns = fields.map( ( field ) => {
@@ -367,7 +368,7 @@ function ViewTable( {
 		}
 
 		return _columns;
-	}, [ fields, actions, view ] );
+	}, [ fields, actions ] );
 
 	const columnVisibility = useMemo( () => {
 		if ( ! view.hiddenFields?.length ) {
@@ -435,8 +436,9 @@ function ViewTable( {
 		} );
 
 	const shownData = useAsyncList( data );
+	const usedData = deferredRendering ? shownData : data;
 	const dataView = useReactTable( {
-		data: shownData,
+		data: usedData,
 		columns,
 		manualSorting: true,
 		manualFiltering: true,

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -331,6 +331,7 @@ export default function PagePages() {
 					view={ view }
 					onChangeView={ onChangeView }
 					onSelectionChange={ onSelectionChange }
+					deferredRendering={ false }
 				/>
 			</Page>
 			{ view.type === LAYOUT_LIST && (

diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -353,6 +353,7 @@ export default function DataviewsTemplates() {
 				view={ view }
 				onChangeView={ onChangeView }
 				supportedLayouts={ [ LAYOUT_TABLE, LAYOUT_GRID ] }
+				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
 			/>
 		</Page>
 	);