From 985f7a58689e80fa078e52e3a7f4cdc589034e35 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:40:16 +1200
Subject: [PATCH] Stop rendering code actions before codes are available

---
 settings/src/components/backup-codes.js | 54 +++++++++++++------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
index 193e20d5..ef8cc94d 100644
--- a/settings/src/components/backup-codes.js
+++ b/settings/src/components/backup-codes.js
@@ -132,12 +132,6 @@ function Setup( { setGenerating, onSuccess } ) {
 				<>
 					<CodeList codes={ backupCodes } />
 
-					<ButtonGroup>
-						<CopyToClipboardButton codes={ backupCodes } />
-						<PrintButton />
-						<DownloadButton codes={ backupCodes } />
-					</ButtonGroup>
-
 					<CheckboxControl
 						label="I have printed or saved these codes"
 						checked={ hasPrinted }
@@ -162,33 +156,41 @@ function Setup( { setGenerating, onSuccess } ) {
 }
 
 /**
- * Display a list of backup codes
+ * Display a list of backup codes and actions
  *
  * @param props
  * @param props.codes
  */
 function CodeList( { codes } ) {
-	return (
-		<div className="wporg-2fa__backup-codes-list">
-			{ ! codes.length && (
-				<p>
-					Generating backup codes...
-					<Spinner />
-				</p>
-			) }
+	const hasCodes = !! codes.length;
 
-			{ codes.length > 0 && (
-				<ol>
-					{ codes.map( ( code ) => {
-						return (
-							<li key={ code } className="wporg-2fa__token">
-								{ code.slice( 0, 4 ) + ' ' + code.slice( 4 ) }
-							</li>
-						);
-					} ) }
-				</ol>
+	return (
+		<>
+			<div className="wporg-2fa__backup-codes-list">
+				{ hasCodes ? (
+					<ol>
+						{ codes.map( ( code ) => {
+							return (
+								<li key={ code } className="wporg-2fa__token">
+									{ code.slice( 0, 4 ) + ' ' + code.slice( 4 ) }
+								</li>
+							);
+						} ) }
+					</ol>
+				) : (
+					<p>
+						<Spinner /> Generating backup codes...
+					</p>
+				) }
+			</div>
+			{ hasCodes && (
+				<ButtonGroup>
+					<CopyToClipboardButton codes={ codes } />
+					<PrintButton />
+					<DownloadButton codes={ codes } />
+				</ButtonGroup>
 			) }
-		</div>
+		</>
 	);
 }