Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sejas merged 3 commits into from
Dec 5, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2090673
Add loading and empty placeholders to the list of sites
epeicher Dec 4, 2025
f3b8df3
Merge branch 'trunk' of github.com:Automattic/studio into stu-1080-st…
epeicher Dec 4, 2025
7681ea0
Add case for user without sites
sejas Dec 5, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 10 additions & 22 deletions src/modules/add-site/components/pull-remote-site.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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 );
Expand All @@ -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 />
Expand Down
89 changes: 57 additions & 32 deletions src/modules/sync/components/sync-sites-modal-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( {
Expand All @@ -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 } />;
}
Expand All @@ -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={ () => {
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down