Merge pull request #21812 from Yoast/21811-hide-semrush-loading-table…

…-when-user-needs-to-upgrade 21811 hide semrush loading table when user needs to upgrade
Yoast · Nov 8, 2024 · 1f258c6 · 1f258c6
2 parents 3127873 + ab8a2fb
commit 1f258c6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js b/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js
@@ -93,6 +93,7 @@ export default function RelatedKeyphraseModalContent( props ) {
 		relatedKeyphrases,
 		setRequestSucceeded,
 		setRequestLimitReached,
+		isPending,
 		isRtl,
 	} = props;
 
@@ -128,17 +129,18 @@ export default function RelatedKeyphraseModalContent( props ) {
 					relatedKeyphrases={ relatedKeyphrases }
 					columnNames={ response?.results?.columnNames }
 					data={ response?.results?.rows }
+					isPending={ isPending }
 					renderButton={ renderAction }
 				/>
-				<p className="yst-mb-0 yst-mt-2">
+				{ response?.results?.rows && <p className="yst-mb-0 yst-mt-2">
 					<GetMoreInsightsLink href={ url }>
 						{ sprintf(
 						/* translators: %s expands to Semrush */
 							__( "Get more insights at %s", "wordpress-seo" ),
 							"Semrush"
 						) }
 					</GetMoreInsightsLink>
-				</p>
+				</p> }
 			</Root>
 
 		</Fragment>
@@ -160,6 +162,7 @@ RelatedKeyphraseModalContent.propTypes = {
 	response: PropTypes.object,
 	lastRequestKeyphrase: PropTypes.string,
 	isRtl: PropTypes.bool,
+	isPending: PropTypes.bool,
 };
 
 RelatedKeyphraseModalContent.defaultProps = {
@@ -170,4 +173,5 @@ RelatedKeyphraseModalContent.defaultProps = {
 	response: {},
 	lastRequestKeyphrase: "",
 	isRtl: false,
+	isPending: false,
 };
diff --git a/packages/related-keyphrase-suggestions/src/components/KeyphrasesTable/index.js b/packages/related-keyphrase-suggestions/src/components/KeyphrasesTable/index.js
@@ -146,12 +146,17 @@ const prepareRow = ( columnNames, row ) => {
  * @param {Function} [renderButton] The render button function.
  * @param {Object[]} [relatedKeyphrases=[]] The related keyphrases.
  * @param {string} [className=""] The class name for the table.
+ * @param {boolean} [isPending=false] Whether the data is still pending.
  *
  * @returns {JSX.Element} The keyphrases table.
  */
-export const KeyphrasesTable = ( { columnNames = [], data, renderButton, relatedKeyphrases = [], className = "" } ) => {
+export const KeyphrasesTable = ( { columnNames = [], data, renderButton, relatedKeyphrases = [], className = "", isPending = false } ) => {
 	const rows = data?.map( row => prepareRow(  columnNames, row ) );
 
+	if ( ( ! rows || rows.length === 0 ) && ! isPending ) {
+		return null;
+	}
+
 	return <Table className={ className }>
 		<Table.Head>
 			<Table.Row>
@@ -184,18 +189,17 @@ export const KeyphrasesTable = ( { columnNames = [], data, renderButton, related
 		</Table.Head>
 
 		<Table.Body>
+			{ rows && rows.map( ( rowData, index ) => (
+				<KeyphrasesTableRow
+					key={ `related-keyphrase-${ index }` }
+					renderButton={ renderButton }
+					relatedKeyphrases={ relatedKeyphrases }
+					{ ...rowData }
+				/> ) )
+			}
 
-			{ rows
-				? rows.map( ( rowData, index ) => (
-					<KeyphrasesTableRow
-						key={ `related-keyphrase-${ index }` }
-						renderButton={ renderButton }
-						relatedKeyphrases={ relatedKeyphrases }
-						{ ...rowData }
-					/> ) )
-				// Show 10 loading rows when there are no rows.
-				: Array.from( { length: 10 }, ( _, index ) => (
-					<LoadingKeyphrasesTableRow key={ `loading-row-${ index }` } withButton={ isFunction( renderButton ) }  /> ) )
+			{ isPending && Array.from( { length: 10 }, ( _, index ) => (
+				<LoadingKeyphrasesTableRow key={ `loading-row-${ index }` } withButton={ isFunction( renderButton ) }  /> ) )
 			}
 		</Table.Body>
 	</Table>;
@@ -212,6 +216,7 @@ KeyphrasesTable.propTypes = {
 	} ) ),
 	renderButton: PropTypes.func,
 	className: PropTypes.string,
+	isPending: PropTypes.bool,
 };
 
 KeyphrasesTable.displayName = "KeyphrasesTable";