Update loading components

lib/component/loading/block/SlidingBlocks2.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBlocksProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function SlidingBlocks2({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.2,
+	animationDuration = 200,
+	color,
 	stroke,
-	fill
-}: LoadingBlocksProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBlocksProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-2.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"
 		>
@@ -27,14 +37,14 @@ export default function SlidingBlocks2({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_1_${id}`}
 					begin={`0;rectangle2_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -42,7 +52,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_2_${id}`}
 					begin={`rectangle2_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -50,7 +60,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_3_${id}`}
 					begin={`rectangle2_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -58,7 +68,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_4_${id}`}
 					begin={`rectangle2_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -70,14 +80,14 @@ export default function SlidingBlocks2({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle2_1_${id}`}
 					begin={`rectangle1_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -85,7 +95,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_2_${id}`}
 					begin={`rectangle1_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -93,7 +103,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_3_${id}`}
 					begin={`rectangle1_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -101,7 +111,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_4_${id}`}
 					begin={`rectangle1_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>