Update loading components

lib/component/loading/various/BouncingDot.tsx

@@ -1,22 +1,32 @@
 import type { LoadingVariousProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function BouncingDot({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.9,
+	animationDuration = 900,
+	color,
 	stroke,
-	fill
-}: LoadingVariousProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingVariousProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bouncing-ball.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 	>
@@ -26,15 +36,15 @@ export default function BouncingDot({
 			rx="4"
 			ry="4"
 			className={className}
-			stroke={stroke}
-			fill={fill}
+			stroke={color ?? stroke}
+			fill={color ?? fill}
 		>
 			<animate
 				id={`dot1_1_${id}`}
 				begin={`0;dot1_5_${id}.end`}
 				attributeName="cy"
 				calcMode="spline"
-				dur={animationDuration * 5 / 12}
+				dur={dur * 5 / 12}
 				values="5;20"
 				keySplines=".33,0,.66,.33"
 				fill="freeze"
@@ -43,7 +53,7 @@ export default function BouncingDot({
 				begin={`dot1_1_${id}.end`}
 				attributeName="rx"
 				calcMode="spline"
-				dur={animationDuration / 18}
+				dur={dur / 18}
 				values="4;4.8;4"
 				keySplines=".33,0,.66,.33;.33,.66,.66,1"
 			/>
@@ -51,7 +61,7 @@ export default function BouncingDot({
 				begin={`dot1_1_${id}.end`}
 				attributeName="ry"
 				calcMode="spline"
-				dur={animationDuration / 18}
+				dur={dur / 18}
 				values="4;3;4"
 				keySplines=".33,0,.66,.33;.33,.66,.66,1"
 			/>
@@ -60,7 +70,7 @@ export default function BouncingDot({
 				begin={`dot1_1_${id}.end`}
 				attributeName="cy"
 				calcMode="spline"
-				dur={animationDuration / 36}
+				dur={dur / 36}
 				values="20;20.5"
 				keySplines=".33,0,.66,.33"
 			/>
@@ -69,7 +79,7 @@ export default function BouncingDot({
 				begin={`dot1_4_${id}.end`}
 				attributeName="cy"
 				calcMode="spline"
-				dur={animationDuration * 4 / 9}
+				dur={dur * 4 / 9}
 				values="20.5;5"
 				keySplines=".33,.66,.66,1"
 			/>