diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 32db2664d30d8e..8ab72d9cc9683c 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -10,6 +10,7 @@
 ### Bug Fixes
 
 - DataViews: Fix last column classname in table layout. [#76133](https://github.com/WordPress/gutenberg/pull/76133)
+- DataViews: Add spinner in DataViewsLayout in initial load of data. [#76486](https://github.com/WordPress/gutenberg/pull/76486)
 - DataForm: Properly handle dates in datetime control. [#76193](https://github.com/WordPress/gutenberg/pull/76193)
 
 ### Enhancements
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
index e7406bcbea4d6c..dd94f87637400f 100644
--- a/packages/dataviews/src/components/dataviews-layout/index.tsx
+++ b/packages/dataviews/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 = {
@@ -41,8 +43,25 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		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(