test(site): make loading snapshots more predictable #14564
Conversation
Abstracts the Spinner component to control the display of the CircularProgress component. This allows us to make it static during Chromatic tests, making loading tests easier to visualize.
| @@ -18,7 +18,7 @@ export const Loader: FC<LoaderProps> = ({ | |||
| data-testid="loader" | |||
| {...attrs} | |||
| > | |||
| <CircularProgress size={size} /> | |||
| <Spinner aria-label="Loading..." size={size} /> | |||
There was a problem hiding this comment.
I might be misunderstanding but it seems we have a Loader component wrapping a Spinner component wrapping a CircularProgress component. Is there a reason to have 3 levels nesting here?
There was a problem hiding this comment.
Good point! The purpose of the 'Loader' is to act as a container that centrally positions the loading spinner on the page or within a section, with some padding around it. Meanwhile, the 'Spinner' can be utilized in other components, such as loading buttons. Perhaps 'Loader' is not the most suitable name, but I can't think of anything better at the moment.
There was a problem hiding this comment.
Ahh, makes sense! Loader works for me :)
|
One suggestion: we could stick the aria on the actual component so the |
| */ | ||
| if (isChromatic()) { | ||
| props.variant = "determinate"; | ||
| props.value = 75; |
I like the idea! 👍 |
Abstracts the Spinner component to control the display of the CircularProgress component. This allows us to make it static during Chromatic tests, making loading tests easier to visualize.
Before:
After:
