Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

…sponsive-preview-modes-and-the-view-menu

# Conflicts:
#	apps/ui/src/components/site-preview/index.tsx

apps/ui/src/components/site-preview/index.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, moreVertical, pencil } from '@wordpress/icons';
 import { ariaKeyShortcut, displayShortcut, isAppleOS, isKeyboardEvent } from '@wordpress/keycodes';
@@ -939,21 +940,44 @@ export function SitePreview( {
 						</>
 					) : (
 						<div className={ styles.empty }>
-							<p className={ styles.emptyText }>
-								{ __( 'Start the site to see a live preview.' ) }
-							</p>
-							<Button
-								variant="solid"
-								tone="brand"
-								loading={ isStarting }
-								loadingAnnouncement={ __( 'Starting site' ) }
-								onClick={ () => startSite.mutate( site.id ) }
-							>
-								<span className={ styles.startIcon } aria-hidden="true">
-									{ playIcon }
-								</span>
-								{ __( 'Start site' ) }
-							</Button>
+							<div className={ styles.emptyGrid } aria-hidden="true">
+								<DotGrid
+									spacing={ 32 }
+									crossSize={ 5 }
+									crossThickness={ 0.75 }
+									opacity={ 0.16 }
+									intro={ false }
+								/>
+							</div>
+							<div className={ styles.emptyContent }>
+								{ siteThumbnail.data ? (
+									<div className={ styles.emptyThumbnail }>
+										<img
+											src={ siteThumbnail.data }
+											alt={ sprintf(
+												/* translators: %s: site name */
+												__( 'Screenshot of %s' ),
+												site.name
+											) }
+										/>
+									</div>
+								) : null }
+								<p className={ styles.emptyText }>
+									{ __( 'Start the site to see a live preview.' ) }
+								</p>
+								<Button
+									variant="solid"
+									tone="brand"
+									loading={ isStarting }
+									loadingAnnouncement={ __( 'Starting site' ) }
+									onClick={ () => startSite.mutate( site.id ) }
+								>
+									<span className={ styles.startIcon } aria-hidden="true">
+										{ playIcon }
+									</span>
+									{ __( 'Start site' ) }
+								</Button>
+							</div>
 						</div>
 					) }
 				</div>