Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ComboboxControl: Add an isLoading prop to show a loading spinner #68990

Merged
merged 19 commits into from
Feb 5, 2025
+26 −3
Merged

ComboboxControl: Add an isLoading prop to show a loading spinner #68990

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f73720d
Add loading indicator to author selector
adamsilverstein Jan 28, 2025
76488c1
Only show "No items found" when isLoading is false
adamsilverstein Jan 29, 2025
3c7baa6
Merge branch 'trunk' into add/combobox-loading-spinner-refresh
adamsilverstein Jan 31, 2025
07690d6
Remove unitended change
adamsilverstein Jan 31, 2025
736c5ff
Update packages/components/src/combobox-control/types.ts
adamsilverstein Jan 31, 2025
fd97afc
Revert "Only show "No items found" when isLoading is false"
adamsilverstein Jan 31, 2025
3a357c4
Only show the suggestion list when the component isn’t loading data
adamsilverstein Jan 31, 2025
374b2b8
Document `isLoading` prop in readme
adamsilverstein Jan 31, 2025
45bbc6b
Add is loading to Combobox storybook
adamsilverstein Jan 31, 2025
cc0e64a
Match readme description to type.js description
adamsilverstein Jan 31, 2025
dea1a89
Merge branch 'trunk' into add/combobox-loading-spinner-combobox-only
adamsilverstein Jan 31, 2025
bcf4638
Revert post author changes
adamsilverstein Jan 31, 2025
f7f3eac
Update packages/components/src/combobox-control/types.ts
adamsilverstein Feb 4, 2025
89584b1
Update packages/components/src/combobox-control/types.ts
adamsilverstein Feb 4, 2025
a0e8154
Merge branch 'trunk' into add/combobox-loading-spinner-combobox-only
adamsilverstein Feb 4, 2025
304a5b7
Remove storybook isLoading default
adamsilverstein Feb 4, 2025
e526287
Ensire spinner margin is zero
adamsilverstein Feb 4, 2025
782d82a
Add a changelog entry for the new spinner.
adamsilverstein Feb 4, 2025
d3bb5cb
Empty space
Mamaduka Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/components/src/combobox-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function MyComboboxControl() {
label="Font Size"
value={ fontSize }
onChange={ setFontSize }
isLoading={ isLoading }
options={ filteredOptions }
onFilterValueChange={ ( inputValue ) =>
setFilteredOptions(
Expand Down Expand Up @@ -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).
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/combobox-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {};

Expand Down Expand Up @@ -126,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
help,
allowReset = true,
className,
isLoading = false,
messages = {
selected: __( 'Item selected.' ),
},
Expand Down Expand Up @@ -362,6 +364,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
onChange={ onInputChange }
/>
</FlexBlock>
{ isLoading && <Spinner /> }
{ allowReset && (
<Button
size="small"
Expand All @@ -375,7 +378,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
/>
) }
</InputWrapperFlex>
{ isExpanded && (
{ isExpanded && ! isLoading && (
<SuggestionsList
instanceId={ instanceId }
// The empty string for `value` here is not actually used, but is
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/combobox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ WithCustomRenderItem.args = {
</div>
);
},
isLoading: true,
Copy link
Member Author

@adamsilverstein adamsilverstein Jan 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ciampo I added this property, is that right? I was expecting a change when I ran npm run storybook:build but there were none. Do I need to so something else to regenerate storybook assets?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove this. People can use controls in the storybook to toggle the value.

Screenshot

CleanShot 2025-02-03 at 20 14 06

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove this. People can use controls in the storybook to toggle the value.

I assume that storybook screenshot is your local. Since I can't typically run Docker locally I was wondering if storybook was available as part of the CI (before we merge the PR)?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Running npm run storybook:dev should do the trick locally and doesn't require Docker. IIRC, there are no PR-specific builds for Storybook.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey folks, sorry for the delayed reply — not on Gutenberg much these days.

What I meant with #68927 (comment) was to add a new Storybook example that showcases ComboboxControl being used with async loading options, as we do for the author input.

@adamsilverstein and/or @Mamaduka , would any of you be up for this as a nice follow-up?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unsure how to emulate async data in Storybook; I'm guessing with a setTimeout and Promise combo. Do we have any similar examples?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure, but yeah — that sounds reasonable. Maybe something like:

  • first render with empty (or a limited set of) options
  • when clicking a "load more options" button, we trigger an async request:
    • the request could be arbitrarily slowed down (promise with timeout);
    • while the data is loading, we show a spinner

WDYT ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sounds good.

I will add it to my list, but I'm unsure when I'll have time to work on it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me, definitely not a priority, rather a nice example to have. Thank you as always 🙏

};

/**
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/combobox-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,10 @@ export type ComboboxControlProps = Pick<
* If passed, the combobox input will show a placeholder string if no values are present.
*/
placeholder?: string;

/**
* Show a spinner (and hide the suggestions dropdown) while data
* about the matching suggestions (ie the `options` prop) is loading
*/
isLoading?: boolean;
};
Loading