@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.0

package/src/components/dataviews-layout/index.tsx

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../dataviews-layouts';
+import { useDelayedLoading } from '../../hooks/use-delayed-loading';
 import type { ViewBaseProps } from '../../types';
 
 type DataViewsLayoutProps = {
@@ -38,11 +40,29 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		isItemClickable,
 		renderItemLink,
 		defaultLayouts,
+		containerRef,
 		empty = <p>{ __( 'No results' ) }</p>,
 	} = useContext( DataViewsContext );
 
+	const isDelayedInitialLoading = useDelayedLoading( ! hasInitiallyLoaded, {
+		delay: 200,
+	} );
+	// Until the initial data load completes, show a spinner (or nothing if fast).
+	// After that, render the layout component which preserves previous data
+	// while loading subsequent requests.
 	if ( ! hasInitiallyLoaded ) {
-		return null;
+		// If the initial data load is fast, don't show the loading state at all.
+		if ( ! isDelayedInitialLoading ) {
+			return null;
+		}
+		// If the initial data load takes more than 200ms, show the loading state.
+		return (
+			<div className="dataviews-loading">
+				<p>
+					<Spinner />
+				</p>
+			</div>
+		);
 	}
 
 	const ViewComponent = VIEW_LAYOUTS.find(
@@ -50,23 +70,25 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 	)?.component as ComponentType< ViewBaseProps< any > >;
 
 	return (
-		<ViewComponent
-			className={ className }
-			actions={ actions }
-			data={ data }
-			fields={ fields }
-			getItemId={ getItemId }
-			getItemLevel={ getItemLevel }
-			isLoading={ isLoading }
-			onChangeView={ onChangeView }
-			onChangeSelection={ onChangeSelection }
-			selection={ selection }
-			setOpenedFilter={ setOpenedFilter }
-			onClickItem={ onClickItem }
-			renderItemLink={ renderItemLink }
-			isItemClickable={ isItemClickable }
-			view={ view }
-			empty={ empty }
-		/>
+		<div className="dataviews-layout__container" ref={ containerRef }>
+			<ViewComponent
+				className={ className }
+				actions={ actions }
+				data={ data }
+				fields={ fields }
+				getItemId={ getItemId }
+				getItemLevel={ getItemLevel }
+				isLoading={ isLoading }
+				onChangeView={ onChangeView }
+				onChangeSelection={ onChangeSelection }
+				selection={ selection }
+				setOpenedFilter={ setOpenedFilter }
+				onClickItem={ onClickItem }
+				renderItemLink={ renderItemLink }
+				isItemClickable={ isItemClickable }
+				view={ view }
+				empty={ empty }
+			/>
+		</div>
 	);
 }

package/src/components/dataviews-layout/style.scss

@@ -0,0 +1,8 @@
+.dataviews-layout__container {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	background-color: inherit;
+}