Protect: show loading indicator in status column when scan is in prog…

…ress
Automattic · Dec 16, 2024 · dc8c830 · dc8c830
1 parent 1fd1702
commit dc8c830
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git 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/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -24,4 +24,8 @@
 	min-width: 32px;
 	display: flex;
 	justify-content: center;
+
+	> svg {
+		margin: 0;
+	}
 }
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import AdminPage from '../../components/admin-page';
 import { SCAN_IN_PROGRESS_STATUSES } from '../../constants';
-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';
 
@@ -49,7 +49,11 @@ const HomePage = () => {
 						horizontalGap={ 4 }
 					>
 						<Col>
-							<ScanReport dataSource={ status.dataSource } data={ data } />
+							<ScanReport
+								dataSource={ status.dataSource }
+								data={ data }
+								scanInProgress={ isScanInProgress( status ) }
+							/>
 						</Col>
 					</Container>
 				</AdminSection>