Feat : Persist old data during loading in DataViews

[Vrishabhsk]

What?

• Closes DataViews: keep old data while new data is loading #69194

Why?

• In certain scenarios, consumers want to build this other experience (keep old data until new data has been loaded)
• Allows user to modify the DataViews component as per the above scenario using a prop.

How?

• Add new prop : keepPreviousData
• Use the usePrevious hook to maintain record of the previous data displayed in the ViewTable component
• Move the map function responsible for rendering multiple TableRow components to a reusable function

Testing Instructions

1. Create a new variant for DataViews Story
2. Can be found here : packages/dataviews/src/components/dataviews/stories/index.story.tsx
3. Create the following variant :

export const WithLoadingState = () => {
	const [ isLoading, setIsLoading ] = useState( true );
	const [ view, setView ] = useState< View >( {
		...DEFAULT_VIEW,
		fields: [ 'id', 'title', 'body', 'userId', 'categories', 'date' ],
	} );
	const [ displayData, setDisplayData ] = useState< typeof data >( [] );

	useEffect( () => {
		const fetchData = async () => {
			setIsLoading( true );
			try {
				const response = await fetch(
					'https://jsonplaceholder.typicode.com/posts'
				);
				if ( ! response.ok ) {
					throw new Error( 'Failed to fetch data' );
				}
				const posts = await response.json();
				// Transform the API data to match our data structure
				const transformedData = posts.map( ( post: any ) => ( {
					id: post.id,
					title: post.title,
					userId: post.userId,
					date: new Date(
						Date.now() - Math.random() * 10000000000
					).toISOString(),
				} ) );
				setDisplayData( transformedData );
			} catch ( error ) {
				console.error( 'Error fetching data:', error );
			} finally {
				setIsLoading( false );
			}
		};

		fetchData();
	}, [] );

	const { data: shownData, paginationInfo } = useMemo( () => {
		return filterSortAndPaginate( displayData, view, fields );
	}, [ displayData, view ] );

	const handleViewChange = async ( newView: View ) => {
		setView( newView );
		setIsLoading( true );
		try {
			// Simulate API delay when filters change
			await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
		} finally {
			setIsLoading( false );
		}
	};

	return (
		<DataViews
			getItemId={ ( item ) => item.id.toString() }
			paginationInfo={ paginationInfo }
			data={ shownData }
			view={ view }
			fields={ [
				{
					id: 'id',
					label: 'ID',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'title',
					label: 'Title',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'userId',
					label: 'User ID',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'date',
					label: 'Date',
					enableSorting: true,
					enableHiding: true,
				},
			] }
			onChangeView={ handleViewChange }
			actions={ actions }
			isLoading={ isLoading }
			keepPreviousData
			defaultLayouts={ defaultLayouts }
			search={ true }
			onChangeSelection={ ( selection ) => {
				console.log( 'selection', selection );
			} }
			searchLabel="Search posts..."
		/>
	);
};

4. Search something from the records and see the previous data show up in a disabled manner
5. The new results would override the previously rendered data (disabled).

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Vrishabhsk <[email protected]>
Co-authored-by: oandregal <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.