From 76488c1841a4932a3350c927ea739c4da4b5bbfd Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamjs@google.com>
Date: Wed, 29 Jan 2025 07:29:48 -0700
Subject: [PATCH] Only show "No items found" when isLoading is false

---
 packages/components/src/combobox-control/index.tsx          | 1 +
 packages/components/src/form-token-field/index.tsx          | 2 ++
 .../components/src/form-token-field/suggestions-list.tsx    | 3 ++-
 packages/components/src/form-token-field/types.ts           | 6 ++++++
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index 33276ed0823f86..fe0b6aaad30b58 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -399,6 +399,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							__experimentalRenderItem={
 								__experimentalRenderItem
 							}
+							isLoading={ isLoading }
 						/>
 					) }
 				</div>
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index 987c75d769b727..95af52fa21ffd5 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -77,6 +77,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
 		tokenizeOnBlur = false,
+		isLoading = false,
 	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -743,6 +744,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 						onHover={ onSuggestionHovered }
 						onSelect={ onSuggestionSelected }
 						__experimentalRenderItem={ __experimentalRenderItem }
+						isLoading={ isLoading }
 					/>
 				) }
 			</div>
diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index 1339e0cc189e38..bd073026666d30 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -31,6 +31,7 @@ export function SuggestionsList<
 	suggestions = [],
 	displayTransform,
 	instanceId,
+	isLoading,
 	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
 	const listRef = useRefEffect< HTMLUListElement >(
@@ -157,7 +158,7 @@ export function SuggestionsList<
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
 			} ) }
-			{ suggestions.length === 0 && (
+			{ suggestions.length === 0 && ! isLoading && (
 				<li className="components-form-token-field__suggestion is-empty">
 					{ __( 'No items found' ) }
 				</li>
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index 051f00a6cdeb06..989a5611149a0e 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -190,6 +190,11 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	tokenizeOnBlur?: boolean;
+
+	/**
+	 * Is the component loading data?
+	 */
+	isLoading?: boolean;
 }
 
 /**
@@ -207,6 +212,7 @@ export interface SuggestionsListProps<
 	displayTransform: ( value: T ) => string;
 	instanceId: string | number;
 	__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;
+	isLoading?: boolean;
 }
 
 export interface TokenProps extends TokenItem {