diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx index 33276ed0823f8..fe0b6aaad30b5 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 } /> ) } diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 987c75d769b72..95af52fa21ffd 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 } /> ) } diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index 1339e0cc189e3..bd073026666d3 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 && (
  • { __( 'No items found' ) }
  • diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts index 051f00a6cdeb0..989a5611149a0 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 {