From afdf8eac5c3f96d7df71a65c597bc497d49751c5 Mon Sep 17 00:00:00 2001 From: jybrown Date: Tue, 29 Sep 2026 16:51:15 -0300 Subject: [PATCH 1/4] MAPLE-4349 Update Spinner to avoid < animateTransform> component, Safari did not actually spin :( --- packages/gamut/src/Loading/Spinner.tsx | 278 +++++++++++++------------ 1 file changed, 144 insertions(+), 134 deletions(-) diff --git a/packages/gamut/src/Loading/Spinner.tsx b/packages/gamut/src/Loading/Spinner.tsx index 1f6f1924acf..809158372e4 100644 --- a/packages/gamut/src/Loading/Spinner.tsx +++ b/packages/gamut/src/Loading/Spinner.tsx @@ -1,9 +1,26 @@ +import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; import { FunctionComponent, SVGProps } from 'react'; export type SpinnerProps = SVGProps & { size?: number | string; }; +// keyframes used due to lack of support for component for Safari browser +const rotate = keyframes({ + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, +}); + +const SpinnerRing = styled.g({ + animation: `${rotate} 1s linear infinite`, + transformBox: 'view-box', + transformOrigin: 'center', + '@media (prefers-reduced-motion: reduce)': { + animationDuration: '3s', + }, +}); + export const Spinner: FunctionComponent = ({ size = 24, ...props @@ -11,140 +28,133 @@ export const Spinner: FunctionComponent = ({ return ( Spinner - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From 7b392c03749a5d65b4de41361b9a09f15e5e1195 Mon Sep 17 00:00:00 2001 From: jybrown Date: Thu, 1 Oct 2026 10:35:02 -0300 Subject: [PATCH 2/4] MAPLE-4349 version plan created --- .nx/version-plans/version-plan-1790861635940.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .nx/version-plans/version-plan-1790861635940.md diff --git a/.nx/version-plans/version-plan-1790861635940.md b/.nx/version-plans/version-plan-1790861635940.md new file mode 100644 index 00000000000..19b5aabec92 --- /dev/null +++ b/.nx/version-plans/version-plan-1790861635940.md @@ -0,0 +1,5 @@ +--- +gamut: patch +--- + +Update Spinner component for Safari browser support From 2b411d7b785322557f2055715adc110e2c165a69 Mon Sep 17 00:00:00 2001 From: jybrown Date: Thu, 1 Oct 2026 12:02:27 -0300 Subject: [PATCH 3/4] MAPLE-4349 Code Review comments Using css gamut-styles to wrap applied spinner CSS Update comment to better reflect the Safari Browser issue --- packages/gamut/src/Loading/Spinner.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/gamut/src/Loading/Spinner.tsx b/packages/gamut/src/Loading/Spinner.tsx index 809158372e4..ebc91def034 100644 --- a/packages/gamut/src/Loading/Spinner.tsx +++ b/packages/gamut/src/Loading/Spinner.tsx @@ -1,3 +1,4 @@ +import { css } from '@codecademy/gamut-styles'; import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import { FunctionComponent, SVGProps } from 'react'; @@ -6,20 +7,22 @@ export type SpinnerProps = SVGProps & { size?: number | string; }; -// keyframes used due to lack of support for component for Safari browser +// Using keyframes since the element doesn't animate in Safari const rotate = keyframes({ from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' }, }); -const SpinnerRing = styled.g({ - animation: `${rotate} 1s linear infinite`, - transformBox: 'view-box', - transformOrigin: 'center', - '@media (prefers-reduced-motion: reduce)': { - animationDuration: '3s', - }, -}); +const SpinnerRing = styled.g( + css({ + animation: `${rotate} 1s linear infinite`, + transformBox: 'view-box', + transformOrigin: 'center', + '@media (prefers-reduced-motion: reduce)': { + animationDuration: '3s', + }, + }), +); export const Spinner: FunctionComponent = ({ size = 24, From c8bdbb171707ea4f4da45e61762cd3d2634aa389 Mon Sep 17 00:00:00 2001 From: jybrown Date: Thu, 1 Oct 2026 12:08:03 -0300 Subject: [PATCH 4/4] Forgot to make it prettier --- packages/gamut/src/Loading/Spinner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut/src/Loading/Spinner.tsx b/packages/gamut/src/Loading/Spinner.tsx index ebc91def034..c3675439454 100644 --- a/packages/gamut/src/Loading/Spinner.tsx +++ b/packages/gamut/src/Loading/Spinner.tsx @@ -21,7 +21,7 @@ const SpinnerRing = styled.g( '@media (prefers-reduced-motion: reduce)': { animationDuration: '3s', }, - }), + }) ); export const Spinner: FunctionComponent = ({