From 2f7cfc834361a65b30ec23994fa6e06f50af968c Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sun, 15 Dec 2024 13:34:48 -0700
Subject: [PATCH] Protect: show loading indicator in status column when scan is
 in progress

---
 .../components/scan-report/index.tsx           | 18 ++++++++++++++----
 .../protect/src/js/routes/home/index.jsx       |  9 +++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index a471e82994b17..d4839d47d099b 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -1,5 +1,5 @@
 import { type ScanReportExtension } from '@automattic/jetpack-scan';
-import { Tooltip } from '@wordpress/components';
+import { Spinner, Tooltip } from '@wordpress/components';
 import {
 	type SupportedLayouts,
 	type View,
@@ -30,10 +30,16 @@ import styles from './styles.module.scss';
  * @param {string}   props.dataSource        - Data source.
  * @param {Array}    props.data              - Scan report data.
  * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ * @param {boolean}  props.scanInProgress    - Whether a scan is in progress.
  *
  * @return {JSX.Element} The ScanReport component.
  */
-export default function ScanReport( { dataSource, data, onChangeSelection } ): JSX.Element {
+export default function ScanReport( {
+	dataSource,
+	data,
+	onChangeSelection,
+	scanInProgress = false,
+} ): JSX.Element {
 	const baseView = {
 		search: '',
 		filters: [],
@@ -140,7 +146,11 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 					return (
 						<Tooltip className={ styles.tooltip } text={ text }>
 							<div className={ styles.icon }>
-								<ShieldIcon variant={ variant } height={ iconHeight } />
+								{ scanInProgress ? (
+									<Spinner />
+								) : (
+									<ShieldIcon variant={ variant } height={ iconHeight } />
+								) }
 							</div>
 						</Tooltip>
 					);
@@ -191,7 +201,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 		];
 
 		return result;
-	}, [ view, dataSource ] );
+	}, [ view.type, dataSource, scanInProgress ] );
 
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 5f13f5524530e..4c192e7edb575 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -35,7 +35,8 @@ const HomePage = () => {
 		[ status ]
 	);
 
-	const showReport = status.lastChecked || isScanInProgress( status );
+	const scanInProgress = isScanInProgress( status );
+	const showReport = status.lastChecked || isScanInProgress;
 
 	return (
 		<AdminPage>
@@ -48,7 +49,11 @@ const HomePage = () => {
 						horizontalGap={ 4 }
 					>
 						<Col>
-							<ScanReport dataSource={ status.dataSource } data={ data } />
+							<ScanReport
+								dataSource={ status.dataSource }
+								data={ data }
+								scanInProgress={ scanInProgress }
+							/>
 						</Col>
 					</Container>
 				</AdminSection>