Protect: only show Scan Report when scan is in progress or has result…

…s to show

projects/plugins/protect/src/js/routes/home/index.jsx

@@ -1,6 +1,6 @@
 import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import HomeAdminSectionHero from './home-admin-section-hero';
 import styles from './styles.module.scss';
 
@@ -24,20 +24,24 @@ const HomePage = () => {
 		return { id: index + 1, ...item };
 	} );
 
+	const showReport = status.lastChecked || isScanInProgress( status );
+
 	return (
 		<AdminPage>
 			<HomeAdminSectionHero />
-			<AdminSection>
-				<Container
-					className={ styles[ 'scan-report-container' ] }
-					horizontalSpacing={ 5 }
-					horizontalGap={ 4 }
-				>
-					<Col>
-						<ScanReport dataSource={ status.dataSource } data={ data } />
-					</Col>
-				</Container>
-			</AdminSection>
+			{ showReport && (
+				<AdminSection>
+					<Container
+						className={ styles[ 'scan-report-container' ] }
+						horizontalSpacing={ 5 }
+						horizontalGap={ 4 }
+					>
+						<Col>
+							<ScanReport dataSource={ status.dataSource } data={ data } />
+						</Col>
+					</Container>
+				</AdminSection>
+			) }
 		</AdminPage>
 	);
 };