Update loading components

2026-02-24 22:16:46 -05:00
parent a61e7ce19a
commit 637b3a0c34
43 changed files with 1363 additions and 930 deletions
--- a/lib/component/loading/spinner/HalfSpinner.tsx
+++ b/lib/component/loading/spinner/HalfSpinner.tsx
@@ -1,22 +1,33 @@
 import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function HalfSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	className,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: LoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/180-ring-with-bg.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -29,13 +40,13 @@ export default function HalfSpinner({
 			<path
 				d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/spinner/QuarterSpinner.tsx
+++ b/lib/component/loading/spinner/QuarterSpinner.tsx
@@ -1,22 +1,33 @@
 import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function QuarterSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	className,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: LoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/90-ring-with-bg.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -29,13 +40,13 @@ export default function QuarterSpinner({
 			<path
 				d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/spinner/RubberSpinner.tsx
+++ b/lib/component/loading/spinner/RubberSpinner.tsx
@@ -1,23 +1,35 @@
 import type { RubberLoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function RubberSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 2,
-	stretchDuration = 1.5,
+	animationDuration = 2000,
+	stretchDuration = 1500,
+	color,
 	className,
 	stroke,
 	fill = "none",
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: RubberLoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<RubberLoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/ring-resize.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const animationDur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+	const stretchDur = reducedMotion ? stretchDuration / 100 : stretchDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -33,14 +45,14 @@ export default function RubberSpinner({
 					cy="12"
 					r="9.5"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 					strokeWidth="3"
 					strokeLinecap="round"
 				>
 					<animate
 						attributeName="stroke-dasharray"
-						dur={stretchDuration}
+						dur={stretchDur}
 						calcMode="spline"
 						values="0 150;42 150;42 150;42 150"
 						keyTimes="0;0.475;0.95;1"
@@ -49,7 +61,7 @@ export default function RubberSpinner({
 					/>
 					<animate
 						attributeName="stroke-dashoffset"
-						dur={stretchDuration}
+						dur={stretchDur}
 						calcMode="spline"
 						values="0;-16;-59;-59"
 						keyTimes="0;0.475;0.95;1"
@@ -60,7 +72,7 @@ export default function RubberSpinner({
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={animationDur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/spinner/ThreeQuarterSpinner.tsx
+++ b/lib/component/loading/spinner/ThreeQuarterSpinner.tsx
@@ -1,22 +1,33 @@
 import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function ThreeQuarterSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	className,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: LoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/270-ring-with-bg.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -29,13 +40,13 @@ export default function ThreeQuarterSpinner({
 			<path
 				d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>