How do you apply props to progressCircle in Picker?

[dungle-scrubs]

I'm new to React Spectrum and really like the Picker component. However, I'm having a tough time understanding how to do simple things, such as modify styles. In particular, I'd like to change the color on the progressCircle that appears when loading async data into the list. I see that ProgressCircle itself has props to change the color to white or black, but I can't figure out how to access these props within Picker (other colors, I have no idea). Any suggestions?

Thanks

[reidbarber]

Hello! Custom styling options in React Spectrum are intentionally limited in order to ensure that usage is in line with the Spectrum design system. You can read more about that in the Styling section of the React Spectrum docs.

For that specific scenario, the staticColor prop on ProgressCircle is meant to be used when it is over a background color or image (Spectrum guidelines). This wouldn't be applicable inside a picker, since the background is the Picker's popover.

For cases where you want to use custom styling, you can use the Select and ProgressBar from React Aria, where there are lots of different ways to do custom styling.

[dungle-scrubs]

@reidbarber thanks, I understand now. I wonder if it's working properly for me though, because I'm seeing this ProgressCircle not in the popover, but the main element itself, while the initial list items are being fetched.

Either way, no worries and thank you for the links. I really like the way the Picker functions on mobile devices by the way.

[reidbarber]

No problem! There is also a ProgressCircle used inside the popover (shown in the Async loading example when you open the picker and scroll down to load more items). That was the one I thought you were referring to.