From c6db855e11781ff3fa072cb7ceb80bc9f5084a0f Mon Sep 17 00:00:00 2001
From: Tom Rees-Herdman <tom.rees-herdman@10up.com>
Date: Mon, 5 Sep 2022 18:36:40 +0100
Subject: [PATCH] Show a progress bar while determining which SetupBanner
 variant to show.

---
 .../dashboard/ActivationBanner/SetupBanner.js | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js
index dd8ef2ae10f..7278498ca16 100644
--- a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js
+++ b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js
@@ -45,6 +45,8 @@ import { useTooltipState } from '../../../../../components/AdminMenuTooltip/useT
 import { useShowTooltip } from '../../../../../components/AdminMenuTooltip/useShowTooltip';
 import { AdminMenuTooltip } from '../../../../../components/AdminMenuTooltip/AdminMenuTooltip';
 import { getBannerDismissalExpiryTime } from '../../../utils/banner-dismissal-expiry';
+import { Cell, Grid, Row } from '../../../../../material-components';
+import ProgressBar from '../../../../../components/ProgressBar';
 const { useDispatch, useSelect } = Data;
 
 export default function SetupBanner( { onSubmitSuccess } ) {
@@ -56,9 +58,27 @@ export default function SetupBanner( { onSubmitSuccess } ) {
 
 	const hasExistingProperty = useSelect( ( select ) => {
 		const accountID = select( MODULES_ANALYTICS ).getAccountID();
+
 		const properties =
-			select( MODULES_ANALYTICS_4 ).getProperties( accountID ) || [];
-		return properties.length > 0;
+			select( MODULES_ANALYTICS_4 ).getProperties( accountID );
+
+		if ( properties === undefined ) {
+			return undefined;
+		}
+
+		if ( properties.length === 0 ) {
+			return false;
+		}
+
+		// Make a call here to ensure getAccounts is resolved before rendering the PropertySelect
+		// component, to avoid showing a ProgressBar in the PropertySelect.
+		const accounts = select( MODULES_ANALYTICS ).getAccounts();
+
+		if ( accounts === undefined ) {
+			return undefined;
+		}
+
+		return true;
 	} );
 	const existingTag = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS_4 ).getExistingTag()
@@ -94,6 +114,18 @@ export default function SetupBanner( { onSubmitSuccess } ) {
 		ACTIVATION_ACKNOWLEDGEMENT_TOOLTIP_STATE_KEY
 	);
 
+	if ( hasExistingProperty === undefined ) {
+		return (
+			<Grid>
+				<Row>
+					<Cell>
+						<ProgressBar />
+					</Cell>
+				</Row>
+			</Grid>
+		);
+	}
+
 	if ( isTooltipVisible ) {
 		return (
 			<Fragment>