Repository navigation
Conversation
🤖 PR meta 🤖📦 Bundle sizeSize Change: +6.25 kB (+0.07%) Total Size: 8.96 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Regression: updating a specific option will only change its value and will not corrupt others in
|
…ndicator # Conflicts: # packages/ui/CHANGELOG.md
|
@WordPress/gutenberg-design Should we be scaling the Spinner stroke weight? It looks very off at the small size, especially in contrast to the tiny and thin checkmark/plus icons. |
I'll fight on this hill. But I won't die on it, so if I lose the fight, it's fine. I'm bullish on, at the very least by default the very thin 1.5px stroke we use across the editor. It's a bit of character, just like when cars design headlights and design a shape, so that 1.5px is a design characteristic. It repeats across progressbars, spinners, icons, and focus styles. And it's unique: the icon stroke width was deliberately set to 1.5 so as to differentiate itself from Material icons (at the time, 2px) and Apple icons (1px). This is the open web, this is our language, we're not the others. Where I'm willing to lose the fight is if there's consensus: yeah make it thicker. But if that's the consensus, please do it across every progress indicator. Because if we change this, let's not arbitrarily erode the character one detail at a time, let's lean in and do it across. |
|
1.5px default seems fine. But I also like the principle that icons feel like they're part of the text which includes weight. I agree that the small spinner looks awkwardly hefty here: 
We scale icon stroke-width based on size, maybe we should do the same with the spinner? |
Yes, solid point. One thing is a spinner in isolation, another is an inline spinner. Can it use the same rules as icons? |
|
I tried adding the stroke scaling into Spinner, which should be largely equivalent to what we do with the icons. How does that look? #85378 |
What?
Add a
LoadingIndicatorsubcomponent toCombobox,Autocomplete,SearchableSelect,SearchableChipSelect,SearchableSelectControl, andSearchableChipSelectControl.The spinner is built in. The message defaults to translated
Loading…and can be overridden throughchildren.Why?
The async examples currently compose a spinner and text in a
StackinsideStatus. Its padding and gap differ from popup items, so the loading row does not align with regular or creatable items.How?
Share the popup item row layout with the loading indicator, including its prefix slot, padding, minimum height, and wrapping. Center an 8px spinner in the shared 16px icon slot and use the same vertical padding as the item list, so the icon center, text position, and popup height stay stable when loading resolves to a creatable item.
Compose the indicator inside the existing
Statuslive region. The higher-level select components expose the same indicator forstatusContent. Update the async examples, add a custom-message example beside regular and creatable items, and document the composition.Testing Instructions
In Storybook, open Combobox → With Loading Indicator and open the popup. The wrapped custom loading message and its spinner should align with the regular and creatable items below.
Open Async Items for Combobox, Autocomplete, SearchableSelectControl, and SearchableChipSelectControl. Start loading by opening the select popup or typing in Autocomplete. Confirm the default loading row appears, then gives way to the results without an empty-results message during loading.
Check With Loading Indicator with both Font only and WordPress global CSS. Emulate forced colors with WordPress global CSS and confirm the loading text and spinner remain visible.
In SearchableChipSelect, open Async Items Permanent Loading and confirm the indicator stays visible. In Async Items With Creatable, type Mango and wait two seconds for matching options, then type Pineberry and wait for the creatable item. Every query change should restart loading, and rapid changes should resolve only the latest query. Confirm the icon center, text position, and popup height stay stable when loading resolves to the creatable item. Both stories are temporary and must be removed before merge.
Screenshots or screencast
The before/after pairs use the same viewport and loading state, captured at 2x and displayed at CSS size.
Custom loading text beside regular and creatable items:
Temporary SearchableChipSelect stories
Remove both temporary stories before merge.
Permanent loading:
For the Pineberry query, the async story now shows a creatable item after loading when there are no matching options.
Each query change restarts the two-second loading state: