test(site): make loading snapshots more predictable#14564
test(site): make loading snapshots more predictable#14564BrunoQuaresma merged 3 commits intomainfrom
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.
| {...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:
