From 7dc6c2934874999cb028de5434e3a40a090ab29d Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 9 Oct 2026 15:32:19 -0400 Subject: [PATCH 1/2] update spinner to match cc gamut --- packages/gamut/src/Loading/Spinner.tsx | 281 +++++++++++++------------ 1 file changed, 147 insertions(+), 134 deletions(-) diff --git a/packages/gamut/src/Loading/Spinner.tsx b/packages/gamut/src/Loading/Spinner.tsx index 1f6f1924ac..0c89a2c6ec 100644 --- a/packages/gamut/src/Loading/Spinner.tsx +++ b/packages/gamut/src/Loading/Spinner.tsx @@ -1,9 +1,29 @@ +import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; +import { css } from '@skillsoft/gamut-styles'; import { FunctionComponent, SVGProps } from 'react'; export type SpinnerProps = SVGProps & { size?: number | string; }; +// 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( + css({ + 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 +31,133 @@ export const Spinner: FunctionComponent = ({ return ( Spinner - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From 7e1051ef5ee3f4b44fa80a2e3fde1bd6b5427a31 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 9 Oct 2026 15:54:24 -0400 Subject: [PATCH 2/2] add changeset --- .changeset/stale-carrots-argue.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stale-carrots-argue.md diff --git a/.changeset/stale-carrots-argue.md b/.changeset/stale-carrots-argue.md new file mode 100644 index 0000000000..b9f4502eaa --- /dev/null +++ b/.changeset/stale-carrots-argue.md @@ -0,0 +1,5 @@ +--- +'@skillsoft/gamut': patch +--- + +Updates Spinner to work in Safari