Skip to content

Commit 8e7f3b1

Browse files
forestreamforestream
committed
Add loading state in Button in components
1 parent 7eca624 commit 8e7f3b1

File tree

5 files changed

+312
-4
lines changed

5 files changed

+312
-4
lines changed

‎packages/components/src/components/Button/Button.stories.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,11 @@ export const WithForm: Story = {
108108
],
109109
}
110110

111+
export const WithLoading: Story = {
112+
args: {
113+
children: 'Submit',
114+
loading: true,
115+
},
116+
}
117+
111118
export default meta

‎packages/components/src/components/Button/IconSpinner.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Box, keyframes } from '@devup-ui/react'
2+
import { SVGProps } from 'react'
3+
4+
const spin = keyframes({
5+
'0%': {
6+
transform: 'rotateZ(0deg)',
7+
},
8+
'100%': {
9+
transform: 'rotateZ(360deg)',
10+
},
11+
})
12+
13+
interface IconSpinnerProps extends SVGProps<SVGSVGElement> {
14+
type?: 'whole' | 'partial'
15+
}
16+
17+
export function IconSpinner({ type = 'whole', ...props }: IconSpinnerProps) {
18+
if (type === 'partial') {
19+
return (
20+
<Box
21+
animationDuration="1s"
22+
animationIterationCount="infinite"
23+
animationName={spin}
24+
animationTimingFunction="linear"
25+
aria-label="Partial loading spinner"
26+
as="svg"
27+
props={{
28+
fill: 'none',
29+
height: '20',
30+
viewBox: '0 0 20 20',
31+
width: '20',
32+
xmlns: 'http://www.w3.org/2000/svg',
33+
...props,
34+
}}
35+
>
36+
<path
37+
d="M17 10C17 11.291 16.643 12.5568 15.9685 13.6575C15.294 14.7582 14.3282 15.651 13.1779 16.237C12.0277 16.8231 10.7378 17.0797 9.45078 16.9784C8.1638 16.8771 6.9299 16.4219 5.8855 15.6631"
38+
stroke="white"
39+
strokeLinecap="round"
40+
strokeWidth="3"
41+
/>
42+
</Box>
43+
)
44+
}
45+
return (
46+
<Box
47+
animationDuration="1s"
48+
animationIterationCount="infinite"
49+
animationName={spin}
50+
animationTimingFunction="linear"
51+
aria-label="Whole loading spinner"
52+
as="svg"
53+
props={{
54+
fill: 'none',
55+
height: '20',
56+
viewBox: '0 0 20 20',
57+
width: '20',
58+
xmlns: 'http://www.w3.org/2000/svg',
59+
...props,
60+
}}
61+
>
62+
<g
63+
clipPath="url(#paint0_angular_1842_200_clip_path)"
64+
data-figma-skip-parse="true"
65+
>
66+
<g transform="matrix(0 0.007 -0.007 0 10 10)">
67+
<foreignObject
68+
height="2857.14"
69+
width="2857.14"
70+
x="-1428.57"
71+
y="-1428.57"
72+
>
73+
<div
74+
style={{
75+
background:
76+
'conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(255, 255, 255, 0) 360deg)',
77+
height: '100%',
78+
width: '100%',
79+
opacity: 1,
80+
}}
81+
></div>
82+
</foreignObject>
83+
</g>
84+
</g>
85+
<path
86+
d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"
87+
data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:0.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:0.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:8.5725282327939710e-16,&#34;m01&#34;:-14.0,&#34;m02&#34;:17.0,&#34;m10&#34;:14.0,&#34;m11&#34;:8.5725282327939710e-16,&#34;m12&#34;:3.0},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"
88+
/>
89+
<defs>
90+
<clipPath id="paint0_angular_1842_200_clip_path">
91+
<path d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z" />
92+
</clipPath>
93+
</defs>
94+
</Box>
95+
)
96+
}

‎packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,178 @@ exports[`Button > should render icon when icon is provided 1`] = `
325325
</div>
326326
`;
327327

328+
exports[`Button > should render loading spinner when icon is provided and loading is true 1`] = `
329+
<div>
330+
<button
331+
aria-label="button"
332+
class=" outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
333+
type="button"
334+
>
335+
<div
336+
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
337+
>
338+
<div
339+
class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-9970740749223281870-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255"
340+
role="presentation"
341+
>
342+
<svg
343+
aria-label="Whole loading spinner"
344+
class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255"
345+
fill="none"
346+
height="20"
347+
style="--animation-name-0-: k-420169018174230850;"
348+
viewBox="0 0 20 20"
349+
width="20"
350+
xmlns="http://www.w3.org/2000/svg"
351+
>
352+
<g
353+
clip-path="url(#paint0_angular_1842_200_clip_path)"
354+
data-figma-skip-parse="true"
355+
>
356+
<g
357+
transform="matrix(0 0.007 -0.007 0 10 10)"
358+
>
359+
<foreignobject
360+
height="2857.14"
361+
width="2857.14"
362+
x="-1428.57"
363+
y="-1428.57"
364+
>
365+
<div
366+
style="height: 100%; width: 100%; opacity: 1;"
367+
/>
368+
</foreignobject>
369+
</g>
370+
</g>
371+
<path
372+
d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"
373+
data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":1.0}],"stopsVar":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":1.0}],"transform":{"m00":8.5725282327939710e-16,"m01":-14.0,"m02":17.0,"m10":14.0,"m11":8.5725282327939710e-16,"m12":3.0},"opacity":1.0,"blendMode":"NORMAL","visible":true}"
374+
/>
375+
<defs>
376+
<clippath
377+
id="paint0_angular_1842_200_clip_path"
378+
>
379+
<path
380+
d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"
381+
/>
382+
</clippath>
383+
</defs>
384+
</svg>
385+
</div>
386+
<div
387+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 transform-0-translateX(8px)--255"
388+
/>
389+
</div>
390+
</button>
391+
</div>
392+
`;
393+
394+
exports[`Button > should render loading spinner when loading is true 1`] = `
395+
<div>
396+
<button
397+
aria-label="button"
398+
class=" outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
399+
type="button"
400+
>
401+
<div
402+
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
403+
>
404+
<div
405+
class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-9970740749223281870-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255"
406+
role="presentation"
407+
>
408+
<svg
409+
aria-label="Whole loading spinner"
410+
class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255"
411+
fill="none"
412+
height="20"
413+
style="--animation-name-0-: k-420169018174230850;"
414+
viewBox="0 0 20 20"
415+
width="20"
416+
xmlns="http://www.w3.org/2000/svg"
417+
>
418+
<g
419+
clip-path="url(#paint0_angular_1842_200_clip_path)"
420+
data-figma-skip-parse="true"
421+
>
422+
<g
423+
transform="matrix(0 0.007 -0.007 0 10 10)"
424+
>
425+
<foreignobject
426+
height="2857.14"
427+
width="2857.14"
428+
x="-1428.57"
429+
y="-1428.57"
430+
>
431+
<div
432+
style="height: 100%; width: 100%; opacity: 1;"
433+
/>
434+
</foreignobject>
435+
</g>
436+
</g>
437+
<path
438+
d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"
439+
data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":1.0}],"stopsVar":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":1.0}],"transform":{"m00":8.5725282327939710e-16,"m01":-14.0,"m02":17.0,"m10":14.0,"m11":8.5725282327939710e-16,"m12":3.0},"opacity":1.0,"blendMode":"NORMAL","visible":true}"
440+
/>
441+
<defs>
442+
<clippath
443+
id="paint0_angular_1842_200_clip_path"
444+
>
445+
<path
446+
d="M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"
447+
/>
448+
</clippath>
449+
</defs>
450+
</svg>
451+
</div>
452+
<div
453+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 transform-0-translateX(8px)--255"
454+
/>
455+
</div>
456+
</button>
457+
</div>
458+
`;
459+
460+
exports[`Button > should render loading spinner when loading is true and loadingSpinner is partial 1`] = `
461+
<div>
462+
<button
463+
aria-label="button"
464+
class=" outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
465+
type="button"
466+
>
467+
<div
468+
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
469+
>
470+
<div
471+
class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-9970740749223281870-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255"
472+
role="presentation"
473+
>
474+
<svg
475+
aria-label="Partial loading spinner"
476+
class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255"
477+
fill="none"
478+
height="20"
479+
style="--animation-name-0-: k-420169018174230850;"
480+
viewBox="0 0 20 20"
481+
width="20"
482+
xmlns="http://www.w3.org/2000/svg"
483+
>
484+
<path
485+
d="M17 10C17 11.291 16.643 12.5568 15.9685 13.6575C15.294 14.7582 14.3282 15.651 13.1779 16.237C12.0277 16.8231 10.7378 17.0797 9.45078 16.9784C8.1638 16.8771 6.9299 16.4219 5.8855 15.6631"
486+
stroke="white"
487+
stroke-linecap="round"
488+
stroke-width="3"
489+
/>
490+
</svg>
491+
</div>
492+
<div
493+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 transform-0-translateX(8px)--255"
494+
/>
495+
</div>
496+
</button>
497+
</div>
498+
`;
499+
328500
exports[`Button > should render primary background color when danger is true and variant is primary 1`] = `
329501
<div>
330502
<button

‎packages/components/src/components/Button/__tests__/index.browser.test.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { css, DevupThemeTypography } from '@devup-ui/react'
22
import { render } from '@testing-library/react'
33

4+
import { IconSpinner } from '../IconSpinner'
45
import { Button } from '../index'
56

67
describe('Button', () => {
@@ -179,4 +180,30 @@ describe('Button', () => {
179180
expect(container).toMatchSnapshot()
180181
expect(container.querySelector('button')).toHaveClass('typo-inlineLabelS')
181182
})
183+
184+
it('should render loading spinner when loading is true', () => {
185+
const { container } = render(<Button loading />)
186+
expect(container).toMatchSnapshot()
187+
expect(
188+
container.querySelector('[aria-label="Whole loading spinner"]'),
189+
).toBeInTheDocument()
190+
})
191+
192+
it('should render loading spinner when loading is true and loadingSpinner is partial', () => {
193+
const { container } = render(<Button loading loadingSpinner="partial" />)
194+
expect(container).toMatchSnapshot()
195+
expect(
196+
container.querySelector('[aria-label="Partial loading spinner"]'),
197+
).toBeInTheDocument()
198+
})
199+
200+
it('should render loading spinner when icon is provided and loading is true', () => {
201+
const { container } = render(
202+
<Button icon={<IconSpinner type="partial" />} loading />,
203+
)
204+
expect(container).toMatchSnapshot()
205+
expect(
206+
container.querySelector('[aria-label="Whole loading spinner"]'),
207+
).toBeInTheDocument()
208+
})
182209
})

0 commit comments

Comments
 (0)