diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c487b0a17a288d..a36773a8e16d66 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `ComboboxControl`: Add an `isLoading` prop to show a loading spinner ([#68990](https://github.com/WordPress/gutenberg/pull/68990)) + ## 29.3.0 (2025-01-29) ### Enhancements diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md index 4089cf9c56e9b5..7a11c8b95fe2e9 100644 --- a/packages/components/src/combobox-control/README.md +++ b/packages/components/src/combobox-control/README.md @@ -39,6 +39,7 @@ function MyComboboxControl() { label="Font Size" value={ fontSize } onChange={ setFontSize } + isLoading={ isLoading } options={ filteredOptions } onFilterValueChange={ ( inputValue ) => setFilteredOptions( @@ -112,13 +113,20 @@ If the control is clicked, the dropdown will expand regardless of this prop. - Required: No - Default: `true` -### placeholder +#### placeholder If passed, the combobox input will show a placeholder string if no values are present. - Type: `string` - Required: No +#### isLoading + +Show a spinner (and hide the suggestions dropdown) while data about the matching suggestions (ie the `options` prop) is loading + +- Type: `Boolean` +- Required: No + #### __experimentalRenderItem Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop). diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx index 28510c8653d02e..9c6bd2a4d75dd2 100644 --- a/packages/components/src/combobox-control/index.tsx +++ b/packages/components/src/combobox-control/index.tsx @@ -35,6 +35,7 @@ import type { TokenInputProps } from '../form-token-field/types'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events'; import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; +import Spinner from '../spinner'; const noop = () => {}; @@ -126,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) { help, allowReset = true, className, + isLoading = false, messages = { selected: __( 'Item selected.' ), }, @@ -362,6 +364,7 @@ function ComboboxControl( props: ComboboxControlProps ) { onChange={ onInputChange } /> + { isLoading && } { allowReset && (