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.

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

Components: SelectControl - Add isLoading prop #21435

Closed
wants to merge 6 commits into from

Conversation

ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Apr 6, 2020

Description

This update adds the ability to render a loading state for the SelectControl (and TreeSelect) components.

This can be done by passing a isLoading prop, like:

<SelectControl isLoading />

Screen Capture on 2020-04-06 at 14-06-16

GIF shows the SelectControl switching from loading to loaded.

When isLoading is set, the select HTML element will be disabled.

I've added more context re: design in this comment

How has this been tested?

In Storybook and in Jest (unit tests)

Types of changes

  • Add isLoading prop to SelectControl
  • Render the inner option elements to account for loading
  • Add unit tests for SelectControll

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

Resolves: #16026 (comment)

@github-actions
Copy link

github-actions bot commented Apr 6, 2020

Size Change: +138 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/components/index.js 194 kB +138 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.75 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-editor/index.js 106 kB 0 B
build/block-editor/style-rtl.css 11.4 kB 0 B
build/block-editor/style.css 11.4 kB 0 B
build/block-library/editor-rtl.css 7.87 kB 0 B
build/block-library/editor.css 7.88 kB 0 B
build/block-library/index.js 126 kB 0 B
build/block-library/style-rtl.css 7.69 kB 0 B
build/block-library/style.css 7.68 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/style-rtl.css 19.5 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 918 B 0 B
build/edit-navigation/style.css 919 B 0 B
build/edit-post/index.js 302 kB 0 B
build/edit-post/style-rtl.css 5.43 kB 0 B
build/edit-post/style.css 5.43 kB 0 B
build/edit-site/index.js 15 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 8.83 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.7 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.3 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@MichaelArestad
Copy link
Contributor

What is a good way to test this?

@ItsJonQ
Copy link
Author

ItsJonQ commented Apr 7, 2020

heya @MichaelArestad ! Oh dear, my apologies! I should have included testing instructions.

  • Pull down the branch
  • Run npm install
  • Once that's done, run npm run storybook:dev to fire up Storybook
  • Once that's loaded, search for the SelectControl
  • At the bottom, there's a knob for isLoading, that you can flip

Screen Shot 2020-04-07 at 14 21 26

That will toggle the state and the UI

@MichaelArestad MichaelArestad added the Needs Accessibility Feedback Need input from accessibility label Apr 9, 2020
@MichaelArestad
Copy link
Contributor

This looks good and works well. I added the "Needs Accessibility Feedback" label just to have someone take a look at that aspect of it.

@ItsJonQ ItsJonQ force-pushed the update/select-control-loading-state branch from b2b4a14 to 03169ee Compare April 28, 2020 13:59
Base automatically changed from master to trunk March 1, 2021 15:43
@ndiego
Copy link
Member

ndiego commented Jul 5, 2022

@ItsJonQ circling back on this PR as it came up in the weekly Editor Bug Scrub. Is there any reason that progress on this PR stopped?

@mirka
Copy link
Member

mirka commented Aug 5, 2022

@ciampo and I discussed how to proceed with this PR, and we decided to close this out since the original problem that needed to be fixed (Parent Page selector) is no longer a select but now a combobox.

It would be nice to have somewhat consistent loading states across the component library, but currently there is not enough product need to prioritize it.

We'll close this for now and refer back to it when implementing a loading state for the ComboboxControl. Thanks!

@mirka mirka closed this Aug 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Accessibility Feedback Need input from accessibility [Package] Components /packages/components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

No visual feedback when Parent Page dropdown is loading.
4 participants