ComboboxControl: Add an `isLoading` prop to show a loading spinner by adamsilverstein · Pull Request #68990 · WordPress/gutenberg

adamsilverstein · 2025-01-31T16:35:48Z

What?

Add a loading indicator to the ComboboxControl component.

ComboboxControl only part of #68927

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

This reverts commit 76488c1.

github-actions · 2025-01-31T16:36:04Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

adamsilverstein · 2025-01-31T16:56:35Z

 			</div>
 		);
 	},
+	isLoading: true,


@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?

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

Screenshot

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)?

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

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?

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?

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 ?

Yeah, sounds good.

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

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

Mamaduka

Thank you, @adamsilverstein! I think this is almost ready for merging.

I noticed that the spacing for the spinner icon is a bit off. Overriding the default margin with 0 should fix it.

P.S. We should also add the changelog entry for this change.

Before

After

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

adamsilverstein · 2025-02-04T17:15:13Z

I noticed that the spacing for the spinner icon is a bit off. Overriding the default margin with 0 should fix it.

Thanks for the feedback. Adjusted in e526287

adamsilverstein · 2025-02-04T17:19:55Z

P.S. We should also add the changelog entry for this change.

Good point. Added in 782d82a, please review, suggestions appreciated

Mamaduka

Thanks for the follow-up, @adamsilverstein!

This looks good to merge.

P.S. CI checks failures look unrelated. It might be easier to restart all of them via rebasing.

CleanShot.2025-02-04.at.21.28.52.mp4

ciampo · 2025-02-05T15:31:41Z

Thank you both for shipping this one, and for doing it in a separate PR from the editor change 🙏

…ordPress#68990) Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>

adamsilverstein and others added 12 commits January 28, 2025 16:02

Add loading indicator to author selector

f73720d

Only show "No items found" when isLoading is false

76488c1

Merge branch 'trunk' into add/combobox-loading-spinner-refresh

3c7baa6

Remove unitended change

07690d6

Update packages/components/src/combobox-control/types.ts

736c5ff

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Revert "Only show "No items found" when isLoading is false"

fd97afc

This reverts commit 76488c1.

Only show the suggestion list when the component isn’t loading data

3a357c4

Document isLoading prop in readme

374b2b8

Add is loading to Combobox storybook

45bbc6b

Match readme description to type.js description

cc0e64a

Merge branch 'trunk' into add/combobox-loading-spinner-combobox-only

dea1a89

Revert post author changes

bcf4638

adamsilverstein requested a review from ajitbohra as a code owner January 31, 2025 16:35

This was referenced Jan 31, 2025

Editor: Add loading state to the 'PostAuthorCombobox' component #68991

Merged

Add loading indicator to combo box control author selector #68927

Closed

adamsilverstein requested review from Mamaduka and ciampo January 31, 2025 16:41

adamsilverstein commented Jan 31, 2025

View reviewed changes

adamsilverstein added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components Needs Design Feedback Needs general design feedback. labels Jan 31, 2025

Mamaduka reviewed Feb 3, 2025

View reviewed changes

Comment thread packages/components/src/combobox-control/types.ts Outdated

Comment thread packages/components/src/combobox-control/types.ts

adamsilverstein and others added 5 commits February 4, 2025 07:55

Update packages/components/src/combobox-control/types.ts

f7f3eac

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

Update packages/components/src/combobox-control/types.ts

89584b1

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

Merge branch 'trunk' into add/combobox-loading-spinner-combobox-only

a0e8154

Remove storybook isLoading default

304a5b7

Ensire spinner margin is zero

e526287

Add a changelog entry for the new spinner.

782d82a

Mamaduka approved these changes Feb 4, 2025

View reviewed changes

Mamaduka reviewed Feb 5, 2025

View reviewed changes

Comment thread packages/components/src/combobox-control/style.scss Outdated

Empty space

d3bb5cb

Mamaduka changed the title ~~Add a loading indicator (isLoading props) to ComboboxControl~~ ComboboxControl: Add an isLoading prop to show a loading spinner Feb 5, 2025

Mamaduka merged commit 589e763 into WordPress:trunk Feb 5, 2025

github-actions Bot added this to the Gutenberg 20.3 milestone Feb 5, 2025

Mamaduka mentioned this pull request Feb 11, 2025

Editor: Add loading state to the 'PageAttributesParent' component #69062

Merged

adamsilverstein mentioned this pull request Mar 17, 2025

ComboboxControl improve loading/fetching state. #25798

Closed

Conversation

adamsilverstein commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Uh oh!

github-actions Bot commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamsilverstein Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Screenshot

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

adamsilverstein commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamsilverstein commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ciampo commented Feb 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

adamsilverstein commented Jan 31, 2025 •

edited

Loading

github-actions Bot commented Jan 31, 2025 •

edited

Loading

adamsilverstein Jan 31, 2025 •

edited

Loading

adamsilverstein commented Feb 4, 2025 •

edited

Loading

adamsilverstein commented Feb 4, 2025 •

edited

Loading