Add loading and empty placeholders to the list of sites (#2190)

epeicher · sejas · web-flow · commit d34bf288caa5 · 2025-12-05T08:47:36.000Z
- Extracts the content of the `SyncSitesSelector` modal to an external component and uses it as part of the `pull-remote-site` component so both uses the same `Loading...` and _empty search_ logic - Adds a [new Gutenberg color](https://github.com/WordPress/gutenberg/blob/80739d1c14df3419bfabe53fbc2963a687de4644/packages/base-styles/_colors.scss#L7) to use the same style than in the [Gutenberg modal](https://github.com/WordPress/gutenberg/blob/728f06a3216bcbea37e7ba4e95636f62c0c78184/packages/components/src/modal/style.scss#L41) --------- Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com>
diff --git a/src/modules/add-site/components/pull-remote-site.tsx b/src/modules/add-site/components/pull-remote-site.tsx
@@ -4,7 +4,7 @@ import {
 } from '@wordpress/components';
 import { check, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
@@ -13,7 +13,7 @@ import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import { ListSites, SearchSites } from 'src/modules/sync/components/sync-sites-modal-selector';
+import { SitesListContent } from 'src/modules/sync/components/sync-sites-modal-selector';
 import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image';
 import { useGetConnectedSitesForLocalSiteQuery } from 'src/stores/sync/connected-sites';
 import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
@@ -127,24 +127,14 @@ export function PullRemoteSite( {
 		userId: user?.id,
 	} );
 	const connectedSiteIds = connectedSites.map( ( { id } ) => id );
-	const { data: syncSites = [] } = useGetWpComSitesQuery(
+	const { data: syncSites = [], isLoading } = useGetWpComSitesQuery(
 		{
 			connectedSiteIds,
 			userId: user?.id,
 		},
 		{ refetchOnMountOrArgChange: true }
 	);
 
-	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
-
-	const filteredSites = syncSites.filter( ( site ) => {
-		const searchQueryLower = searchQuery.toLowerCase();
-		return (
-			site.name?.toLowerCase().includes( searchQueryLower ) ||
-			site.url?.toLowerCase().includes( searchQueryLower )
-		);
-	} );
-
 	const handleSiteSelect = ( siteId: number ) => {
 		const site = syncSites.find( ( s ) => s.id === siteId );
 		setSelectedRemoteSite( site );
@@ -156,15 +146,13 @@ export function PullRemoteSite( {
 				{ __( 'Pull an existing site' ) }
 			</Heading>
 			{ isAuthenticated ? (
-				<VStack className="flex flex-col w-full max-w-[650px] flex-1">
-					<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
-					<div className="h-full">
-						<ListSites
-							syncSites={ filteredSites }
-							selectedSiteId={ selectedRemoteSite?.id || null }
-							onSelectSite={ handleSiteSelect }
-						/>
-					</div>
+				<VStack className="flex flex-col w-full max-w-[650px] flex-1 text-a8c-gray-900">
+					<SitesListContent
+						isLoading={ isLoading }
+						syncSites={ syncSites }
+						selectedSiteId={ selectedRemoteSite?.id || null }
+						onSelectSite={ handleSiteSelect }
+					/>
 				</VStack>
 			) : (
 				<NoAuthPullRemoteSiteView />
diff --git a/src/modules/sync/components/sync-sites-modal-selector.tsx b/src/modules/sync/components/sync-sites-modal-selector.tsx
@@ -43,7 +43,6 @@ export function SyncSitesModalSelector( {
 	const { __ } = useI18n();
 	const { user } = useAuth();
 	const [ selectedSiteId, setSelectedSiteId ] = useState< number | null >( null );
-	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
 	const isOffline = useOffline();
 
 	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
@@ -61,15 +60,6 @@ export function SyncSitesModalSelector( {
 		{ refetchOnMountOrArgChange: true }
 	);
 
-	const filteredSites = syncSites.filter( ( site ) => {
-		const searchQueryLower = searchQuery.toLowerCase();
-		return (
-			site.name?.toLowerCase().includes( searchQueryLower ) ||
-			site.url?.toLowerCase().includes( searchQueryLower )
-		);
-	} );
-	const isEmpty = filteredSites.length === 0;
-
 	if ( syncSites.length === 0 && isSuccess && ! isLoading ) {
 		return <NoWpcomSitesModal onRequestClose={ onRequestClose } selectedSite={ selectedSite } />;
 	}
@@ -93,28 +83,12 @@ export function SyncSitesModalSelector( {
 			title={ getModalTitle() }
 		>
 			<div className="relative" data-testid="sync-sites-modal-selector">
-				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
-				<div className="h-[calc(84vh-232px)]">
-					{ isLoading && (
-						<div className="flex justify-center items-center h-full">
-							{ __( 'Loading sites…' ) }
-						</div>
-					) }
-
-					{ ! isLoading && isEmpty && searchQuery && (
-						<div className="flex justify-center items-center h-full">
-							{ sprintf( __( 'No sites found for "%s"' ), searchQuery ) }
-						</div>
-					) }
-
-					{ ! isLoading && ! isEmpty && (
-						<ListSites
-							syncSites={ filteredSites }
-							selectedSiteId={ selectedSiteId }
-							onSelectSite={ setSelectedSiteId }
-						/>
-					) }
-				</div>
+				<SitesListContent
+					isLoading={ isLoading }
+					syncSites={ syncSites }
+					selectedSiteId={ selectedSiteId }
+					onSelectSite={ setSelectedSiteId }
+				/>
 				<Footer
 					onRequestClose={ onRequestClose }
 					onConnect={ () => {
@@ -176,6 +150,57 @@ export function SearchSites( {
 	);
 }
 
+export function SitesListContent( {
+	isLoading,
+	syncSites,
+	selectedSiteId,
+	onSelectSite,
+}: {
+	isLoading: boolean;
+	syncSites: SyncSite[];
+	selectedSiteId: number | null;
+	onSelectSite: ( id: number ) => void;
+} ) {
+	const { __ } = useI18n();
+	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
+
+	const filteredSites = syncSites.filter( ( site ) => {
+		const searchQueryLower = searchQuery.toLowerCase();
+		return (
+			site.name?.toLowerCase().includes( searchQueryLower ) ||
+			site.url?.toLowerCase().includes( searchQueryLower )
+		);
+	} );
+	const isEmpty = filteredSites.length === 0;
+
+	return (
+		<>
+			<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
+			<div className="h-[calc(84vh-232px)]">
+				{ isLoading && (
+					<div className="flex justify-center items-center h-full">{ __( 'Loading sites…' ) }</div>
+				) }
+
+				{ ! isLoading && isEmpty && searchQuery && (
+					<div className="flex justify-center items-center h-full">
+						{ sprintf( __( 'No sites found for "%s"' ), searchQuery ) }
+					</div>
+				) }
+
+				{ ! isLoading && isEmpty ? (
+					<div className="flex justify-center items-center h-full">{ __( 'No sites found' ) }</div>
+				) : (
+					<ListSites
+						syncSites={ filteredSites }
+						selectedSiteId={ selectedSiteId }
+						onSelectSite={ onSelectSite }
+					/>
+				) }
+			</div>
+		</>
+	);
+}
+
 const getSortedSites = ( sites: SyncSite[] ) => {
 	const order: Record< SyncSite[ 'syncSupport' ], number > = {
 		syncable: 1,
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -129,6 +129,7 @@ for ( const [ key, value ] of Object.entries( palette.colors ) ) {
 
 // These colors are not in the color studio but are used in the design system.
 // Reference: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_colors.scss
+a8cToTailwindColors[ `${ PREFIX }-gray-900` ] = '#1e1e1e'; // Gray 900
 a8cToTailwindColors[ `${ PREFIX }-gray-800` ] = '#2F2F2F'; // Gray 800
 a8cToTailwindColors[ `${ PREFIX }-gray-700` ] = '#757575'; // Gray 700
 a8cToTailwindColors[ `${ PREFIX }-gray-400` ] = '#CCC'; // Gray 400
