Refetch Sync dialog on focus and add spinner

apps/studio/src/modules/add-site/components/pull-remote-site.tsx

@@ -139,7 +139,9 @@ export function PullRemoteSite( {
 	const {
 		data: syncSites = [],
 		isLoading,
+		isFetching,
 		isSuccess,
+		refetch: refetchWpComSites,
 	} = useGetWpComSitesQuery(
 		{
 			userId: user?.id,
@@ -167,9 +169,11 @@ export function PullRemoteSite( {
 					) : (
 						<SitesListContent
 							isLoading={ isLoading }
+							isFetching={ isFetching }
 							syncSites={ syncSites }
 							selectedSiteId={ selectedRemoteSite?.id || null }
 							onSelectSite={ handleSiteSelect }
+							refetchSites={ refetchWpComSites }
 						/>
 					) }
 				</VStack>

apps/studio/src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -1,4 +1,4 @@
-import { Icon, SearchControl as SearchControlWp } from '@wordpress/components';
+import { Icon, SearchControl as SearchControlWp, Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { useState, useEffect } from 'react';
@@ -58,7 +58,9 @@ export function SyncSitesModalSelector( {
 	const {
 		data: syncSites = [],
 		isLoading,
+		isFetching,
 		isSuccess,
+		refetch: refetchWpComSites,
 	} = useGetWpComSitesQuery(
 		{ connectedSiteIds, userId: user?.id },
 		{ refetchOnMountOrArgChange: true }
@@ -89,9 +91,11 @@ export function SyncSitesModalSelector( {
 			<div className="relative" data-testid="sync-sites-modal-selector">
 				<SitesListContent
 					isLoading={ isLoading }
+					isFetching={ isFetching }
 					syncSites={ syncSites }
 					selectedSiteId={ selectedSiteId }
 					onSelectSite={ setSelectedSiteId }
+					refetchSites={ refetchWpComSites }
 				/>
 				<Footer
 					onRequestClose={ onRequestClose }
@@ -156,18 +160,34 @@ function SearchSites( {
 
 export function SitesListContent( {
 	isLoading,
+	isFetching,
 	syncSites,
 	selectedSiteId,
 	onSelectSite,
+	refetchSites,
 }: {
 	isLoading: boolean;
+	isFetching: boolean;
 	syncSites: SyncSite[];
 	selectedSiteId: number | null;
 	onSelectSite: ( id: number ) => void;
+	refetchSites: () => void | Promise< unknown >;
 } ) {
 	const { __ } = useI18n();
+	const isOffline = useOffline();
 	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
 
+	useEffect( () => {
+		if ( isOffline ) {
+			return;
+		}
+		const handleWindowFocus = () => {
+			void refetchSites();
+		};
+		window.addEventListener( 'focus', handleWindowFocus );
+		return () => window.removeEventListener( 'focus', handleWindowFocus );
+	}, [ isOffline, refetchSites ] );
+
 	const filteredSites = syncSites.filter( ( site ) => {
 		const searchQueryLower = searchQuery.toLowerCase();
 		return (
@@ -180,23 +200,36 @@ export function SitesListContent( {
 		? sprintf( __( 'No sites found for "%s"' ), searchQuery )
 		: __( 'No sites found' );
 
+	const isRefetchingSites = isFetching && ! isLoading;
+
 	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 && (
+			<div className="relative h-[calc(84vh-232px)]">
+				{ isLoading ? (
+					<div className="flex justify-center items-center h-full">
+						<Spinner className="!mt-0 !mr-2" />
+						<span className="a8c-body text-frame-text">{ __( 'Loading…' ) }</span>
+					</div>
+				) : isEmpty ? (
 					<div className="flex justify-center items-center h-full">{ emptyMessage }</div>
-				) }
-				{ ! isLoading && ! isEmpty && (
+				) : (
 					<ListSites
 						syncSites={ filteredSites }
 						selectedSiteId={ selectedSiteId }
 						onSelectSite={ onSelectSite }
 					/>
 				) }
+				<div
+					className={ `absolute inset-0 z-[1] flex items-center justify-center bg-frame/80 backdrop-blur-[8px] transition-opacity duration-200 ${
+						isRefetchingSites ? 'opacity-100' : 'opacity-0 pointer-events-none'
+					}` }
+					aria-busy={ isRefetchingSites }
+					aria-live="polite"
+				>
+					<Spinner className="!mt-0 !mr-2" />
+					<span className="a8c-body text-frame-text">{ __( 'Refreshing…' ) }</span>
+				</div>
 			</div>
 		</>
 	);