feat(picker): add loading state to the picker

[razvancir96]

trafficstars

Description

We need to add a loading spinner inside the picker's button.

Related issue(s)

• https://github.com/adobe/spectrum-web-components/issues/3076

Motivation and context

In one of Adobe's projects, we need to support the loading spinner inside the picker's button.

How has this been tested?

• [x] Test case 1
  1. Run yarn storybook
  2. Go to Picker -> Sizes stories: https://localhost:8001/?path=/story/picker-sizes--s
  3. Change the sizes and from the controls, set the loading property on true. Also, change the scale.

Screenshots (if appropriate)

Size S:

Size M:

Size L:

Size XL:

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• [x] I have signed the Adobe Open Source CLA.
• [x] My code follows the code style of this project.
• [x] If my change required a change to the documentation, I have updated the documentation in this pull request.
• [x] I have read the CONTRIBUTING document.
• [x] I have added tests to cover my changes.
• [x] All new and existing tests passed.
• [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions[bot]]

Branch preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[razvancir96]

@Westbrook I opened a new PR, directly from the main repo (not fork). Checked your review from the previous PR, and from what I see, there are 2 things left:

• Testing that the loading state also makes the picker disabled (forgot to do it, will do it soon)
• Verifying with pfulton (I'll let you tag if you consider necessary) about some variations

[github-actions[bot]]

Tachometer results

Chrome

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	483 kB	69.96ms - 72.99ms	-	unsure 🔍 -4% - +3% -3.06ms - +2.17ms
branch	474 kB	69.78ms - 74.05ms	unsure 🔍 -3% - +4% -2.17ms - +3.06ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	644 kB	166.46ms - 169.76ms	-	unsure 🔍 -1% - +2% -2.19ms - +2.67ms
branch	636 kB	166.09ms - 169.66ms	unsure 🔍 -2% - +1% -2.67ms - +2.19ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	704 kB	36.82ms - 37.20ms	-	unsure 🔍 -1% - +1% -0.53ms - +0.33ms
branch	696 kB	36.73ms - 37.49ms	unsure 🔍 -1% - +1% -0.33ms - +0.53ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	390.88ms - 397.90ms	-	unsure 🔍 -1% - +1% -4.17ms - +5.21ms
branch	696 kB	390.75ms - 396.98ms	unsure 🔍 -1% - +1% -5.21ms - +4.17ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	473 kB	207.59ms - 212.38ms	-	unsure 🔍 -3% - +0% -6.06ms - +0.86ms
branch	465 kB	210.08ms - 215.09ms	unsure 🔍 -0% - +3% -0.86ms - +6.06ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	672 kB	458.91ms - 464.78ms	-	unsure 🔍 -1% - +1% -5.65ms - +2.66ms
branch	685 kB	460.40ms - 466.28ms	unsure 🔍 -1% - +1% -2.66ms - +5.65ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	788 kB	35.90ms - 36.46ms	-	unsure 🔍 -1% - +1% -0.39ms - +0.38ms
branch	757 kB	35.92ms - 36.45ms	unsure 🔍 -1% - +1% -0.38ms - +0.39ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	756 kB	344.97ms - 349.26ms	-	unsure 🔍 -1% - +1% -3.87ms - +2.40ms
branch	748 kB	345.56ms - 350.14ms	unsure 🔍 -1% - +1% -2.40ms - +3.87ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	757 kB	52.18ms - 53.38ms	-	unsure 🔍 -2% - +1% -1.19ms - +0.64ms
branch	749 kB	52.37ms - 53.75ms	unsure 🔍 -1% - +2% -0.64ms - +1.19ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	510 kB	563.77ms - 572.00ms	-	unsure 🔍 -1% - +1% -5.52ms - +7.19ms
branch	502 kB	562.21ms - 571.89ms	unsure 🔍 -1% - +1% -7.19ms - +5.52ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	21.25ms - 21.56ms	-	unsure 🔍 -0% - +1% -0.06ms - +0.27ms
branch	373 kB	21.24ms - 21.37ms	unsure 🔍 -1% - +0% -0.27ms - +0.06ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	717 kB	1866.34ms - 1869.14ms	-	unsure 🔍 -0% - +0% -1.82ms - +2.36ms
branch	710 kB	1865.92ms - 1869.02ms	unsure 🔍 -0% - +0% -2.36ms - +1.82ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	650 kB	61.19ms - 62.31ms	-	unsure 🔍 -1% - +2% -0.69ms - +1.21ms
branch	642 kB	60.72ms - 62.26ms	unsure 🔍 -2% - +1% -1.21ms - +0.69ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	630 kB	34.66ms - 35.21ms	-	unsure 🔍 -1% - +1% -0.41ms - +0.40ms
branch	622 kB	34.64ms - 35.23ms	unsure 🔍 -1% - +1% -0.40ms - +0.41ms	-

Firefox

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	483 kB	143.16ms - 150.80ms	-	unsure 🔍 -4% - +3% -6.24ms - +4.60ms
branch	474 kB	143.95ms - 151.65ms	unsure 🔍 -3% - +4% -4.60ms - +6.24ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	644 kB	315.95ms - 345.09ms	-	unsure 🔍 -4% - +6% -14.44ms - +20.40ms
branch	636 kB	317.99ms - 337.09ms	unsure 🔍 -6% - +4% -20.40ms - +14.44ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	704 kB	67.24ms - 73.40ms	-	slower ❌ 9% - 20% 5.75ms - 12.29ms
branch	696 kB	60.23ms - 62.37ms	faster ✔ 9% - 17% 5.75ms - 12.29ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	711.61ms - 733.11ms	-	slower ❌ 4% - 7% 24.78ms - 49.74ms
branch	696 kB	678.76ms - 691.44ms	faster ✔ 3% - 7% 24.78ms - 49.74ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	473 kB	431.23ms - 446.37ms	-	unsure 🔍 -1% - +3% -5.21ms - +13.45ms
branch	465 kB	429.22ms - 440.14ms	unsure 🔍 -3% - +1% -13.45ms - +5.21ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	763 kB	714.22ms - 813.26ms	-	unsure 🔍 -2% - +15% -11.25ms - +105.33ms
branch	755 kB	685.96ms - 747.44ms	unsure 🔍 -13% - +1% -105.33ms - +11.25ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	765 kB	72.58ms - 78.70ms	-	unsure 🔍 -10% - +3% -7.82ms - +2.78ms
branch	757 kB	73.83ms - 82.49ms	unsure 🔍 -4% - +10% -2.78ms - +7.82ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	756 kB	635.21ms - 724.59ms	-	unsure 🔍 -0% - +18% +1.25ms - +112.51ms
branch	748 kB	589.90ms - 656.14ms	faster ✔ 1% - 16% 1.25ms - 112.51ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	757 kB	116.58ms - 124.66ms	-	slower ❌ 2% - 14% 2.25ms - 15.19ms
branch	749 kB	106.85ms - 116.95ms	faster ✔ 2% - 12% 2.25ms - 15.19ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	510 kB	994.72ms - 1015.52ms	-	unsure 🔍 -0% - +2% -4.64ms - +17.84ms
branch	502 kB	994.24ms - 1002.80ms	unsure 🔍 -2% - +0% -17.84ms - +4.64ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	44.87ms - 51.01ms	-	unsure 🔍 -10% - +8% -4.89ms - +3.73ms
branch	373 kB	45.50ms - 51.54ms	unsure 🔍 -8% - +10% -3.73ms - +4.89ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	717 kB	1637.73ms - 1649.15ms	-	unsure 🔍 -0% - +1% -4.24ms - +11.40ms
branch	710 kB	1634.51ms - 1645.21ms	unsure 🔍 -1% - +0% -11.40ms - +4.24ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	650 kB	208.54ms - 215.14ms	-	unsure 🔍 -0% - +4% -0.41ms - +9.09ms
branch	642 kB	204.08ms - 210.92ms	unsure 🔍 -4% - +0% -9.09ms - +0.41ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	630 kB	71.95ms - 74.09ms	-	faster ✔ 17% - 23% 14.68ms - 21.08ms
branch	622 kB	87.89ms - 93.91ms	slower ❌ 20% - 29% 14.68ms - 21.08ms	-

[Rocss]

After a discussion with @razvancir96 we agreed that our team will take over this PR from next week. @Westbrook are there any concerns about this functionality besides the code review on this PR?

[Westbrook]

@Rocss please sync up with @TarunAdobe about normalizing this PR and the API applied to the Picker herein with the work done in https://github.com/adobe/spectrum-web-components/pull/3163.

[github-actions[bot]]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.97	0.97	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	241.283 kB	228.748 kB	228.466 kB 🏆
Scripts	60.143 kB	54.572 kB	54.51 kB 🏆
Stylesheet	48.607 kB	42.298 kB	42.082 kB 🏆
Document	5.821 kB	5.166 kB	5.162 kB 🏆
Third Party	126.712 kB	126.712 kB	126.712 kB

Request Count

Category	Latest	Main	Branch
Total	43	43	43
Scripts	35	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

[Rocss]

Given that the progress spinner is spinning inside the picker, VRT will fail because of different states of the spinner. Was there anything similar being done in the repo so far?

[Westbrook]

For stability in the VRTs, checkout https://github.com/adobe/spectrum-web-components/pull/4055. It should "just work ™️", 🤞🏼, after that PR lands.

[Rocss]

I have no more things to add to this PR. Happy to implement any other feedback if there is. cc: @Westbrook @TarunAdobe

[TarunAdobe]

Hey @Rocss I just have a final comment before we can land this... we'd want to split up the Picker into a list of sized stories so that we can track down how the pending progress-circle looks in different sizes just like we do in button.