refactor: add accesibility feature

PolkaGate · Oct 23, 2024 · cf333b9 · cf333b9
1 parent 67502d2
commit cf333b9
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/useAnimateOnce.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/useAnimateOnce.tsx
@@ -5,14 +5,19 @@ import { useEffect, useState } from 'react';
 
 export default function useAnimateOnce (condition: boolean | undefined): boolean {
   const [animate, setAnimate] = useState(false);
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-  useEffect((): void => {
-    if (condition) {
+  useEffect(() => {
+    if (condition && !prefersReducedMotion) {
       setAnimate(true);
 
-      setTimeout(() => setAnimate(false), 500);
+      const timeoutId = setTimeout(() => setAnimate(false), 500);
+
+      return () => clearTimeout(timeoutId);
     }
-  }, [condition]);
+
+    return undefined;
+  }, [condition, prefersReducedMotion]);
 
   return animate;
 }