style: shake account icons once on activation #1603
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,62 @@ | ||||||||||||||||||||||||||||||
| // Copyright 2019-2024 @polkadot/extension-ui authors & contributors | ||||||||||||||||||||||||||||||
| // SPDX-License-Identifier: Apache-2.0 | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| import { useCallback, useEffect, useRef, useState } from 'react'; | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| interface AnimateOnceConfig { | ||||||||||||||||||||||||||||||
| duration?: number; | ||||||||||||||||||||||||||||||
| delay?: number; | ||||||||||||||||||||||||||||||
| onStart?: () => void; | ||||||||||||||||||||||||||||||
| onComplete?: () => void; | ||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| const DEFAULT_DURATION = 500; | ||||||||||||||||||||||||||||||
| const DEFAULT_DELAY = 0; | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| type Timer = ReturnType<typeof setTimeout>; | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| /** | ||||||||||||||||||||||||||||||
| * A hook that triggers a one-time animation state when a condition becomes true. | ||||||||||||||||||||||||||||||
| * Accounts for 'prefers-reduced-motion' settings. | ||||||||||||||||||||||||||||||
| * @param condition - The condition that triggers the animation | ||||||||||||||||||||||||||||||
| * @param config - Configuration options for the animation | ||||||||||||||||||||||||||||||
| * @returns animate: boolean - Current animation state | ||||||||||||||||||||||||||||||
| */ | ||||||||||||||||||||||||||||||
| export default function useAnimateOnce (condition: boolean | undefined, config: AnimateOnceConfig = {}): boolean { | ||||||||||||||||||||||||||||||
| const [animate, setAnimate] = useState(false); | ||||||||||||||||||||||||||||||
|
Comment on lines
+25
to
+26
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider stricter typing for the condition parameter. The -export default function useAnimateOnce (condition: boolean | undefined, config: AnimateOnceConfig = {}): boolean {
+export default function useAnimateOnce (condition: boolean, config: AnimateOnceConfig = {}): boolean {📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||
| const timeoutRef = useRef<Timer>(); | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| const { delay = DEFAULT_DELAY, duration = DEFAULT_DURATION, onComplete, onStart } = config; | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| // Check if the user prefers reduced motion | ||||||||||||||||||||||||||||||
| const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; | ||||||||||||||||||||||||||||||
|
Comment on lines
+31
to
+32
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance accessibility check implementation. The current implementation checks motion preferences only once during initialization. Consider using a more robust solution that can react to preference changes. -const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+const [prefersReducedMotion, setPrefersReducedMotion] = useState(mediaQuery.matches);
+
+useEffect(() => {
+ const handler = (event: MediaQueryListEvent) => {
+ setPrefersReducedMotion(event.matches);
+ };
+
+ mediaQuery.addEventListener('change', handler);
+ return () => mediaQuery.removeEventListener('change', handler);
+}, []);📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| // Cleanup function to clear any pending timeouts | ||||||||||||||||||||||||||||||
| const cleanup = useCallback(() => { | ||||||||||||||||||||||||||||||
| if (timeoutRef.current) { | ||||||||||||||||||||||||||||||
| clearTimeout(timeoutRef.current); | ||||||||||||||||||||||||||||||
| timeoutRef.current = undefined; | ||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||
| }, []); | ||||||||||||||||||||||||||||||
|
Comment on lines
+35
to
+40
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance cleanup implementation. The cleanup function should also reset the animation state to ensure consistent behavior during unmount or when dependencies change. const cleanup = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = undefined;
+ setAnimate(false);
}
}, []);
|
||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| const trigger = useCallback(() => { | ||||||||||||||||||||||||||||||
| cleanup(); | ||||||||||||||||||||||||||||||
| onStart?.(); | ||||||||||||||||||||||||||||||
| setAnimate(true); | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| timeoutRef.current = setTimeout(() => { | ||||||||||||||||||||||||||||||
| setAnimate(false); | ||||||||||||||||||||||||||||||
| onComplete?.(); | ||||||||||||||||||||||||||||||
| }, duration); | ||||||||||||||||||||||||||||||
| }, [cleanup, duration, onStart, onComplete]); | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| useEffect(() => { | ||||||||||||||||||||||||||||||
| if (condition && !prefersReducedMotion) { | ||||||||||||||||||||||||||||||
| timeoutRef.current = setTimeout(trigger, delay); | ||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| return cleanup; | ||||||||||||||||||||||||||||||
| }, [cleanup, condition, delay, trigger, prefersReducedMotion]); | ||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||
| return animate; | ||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.