ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Callback Manager instead of dispatching event in useHeavyAnimationCheck

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-30 20:29:06 -05:00
parent fc5686bb43
commit 5df9191ef0
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/hooks/useHeavyAnimationCheck.ts
View File

@ -1,14 +1,15 @@
import { useEffect } from '../lib/teact/teact'; import { useEffect } from '../lib/teact/teact';
import { createCallbackManager } from '../util/callbacks';
const ANIMATION_START_EVENT = 'tt-event-heavy-animation-start';
const ANIMATION_END_EVENT = 'tt-event-heavy-animation-end';
let timeout: number | undefined;
let isAnimating = false;
// Make sure to end even if end callback was not called (which was some hardly-reproducible bug) // Make sure to end even if end callback was not called (which was some hardly-reproducible bug)
const AUTO_END_TIMEOUT = 1000; const AUTO_END_TIMEOUT = 1000;
const startCallbacks = createCallbackManager();
const endCallbacks = createCallbackManager();
let timeout: number | undefined;
let isAnimating = false;
const useHeavyAnimationCheck = ( const useHeavyAnimationCheck = (
handleAnimationStart: AnyToVoidFunction, handleAnimationStart: AnyToVoidFunction,
handleAnimationEnd: AnyToVoidFunction, handleAnimationEnd: AnyToVoidFunction,
@ -23,12 +24,12 @@ const useHeavyAnimationCheck = (
handleAnimationStart(); handleAnimationStart();
} }
document.addEventListener(ANIMATION_START_EVENT, handleAnimationStart); startCallbacks.addCallback(handleAnimationStart);
document.addEventListener(ANIMATION_END_EVENT, handleAnimationEnd); endCallbacks.addCallback(handleAnimationEnd);
return () => { return () => {
document.removeEventListener(ANIMATION_END_EVENT, handleAnimationEnd); endCallbacks.removeCallback(handleAnimationEnd);
document.removeEventListener(ANIMATION_START_EVENT, handleAnimationStart); startCallbacks.removeCallback(handleAnimationStart);
}; };
}, [isDisabled, handleAnimationEnd, handleAnimationStart]); }, [isDisabled, handleAnimationEnd, handleAnimationStart]);
}; };
@ -40,7 +41,7 @@ export function isHeavyAnimating() {
export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) { export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) {
if (!isAnimating) { if (!isAnimating) {
isAnimating = true; isAnimating = true;
document.dispatchEvent(new Event(ANIMATION_START_EVENT)); startCallbacks.runCallbacks();
} }
if (timeout) { if (timeout) {
@ -56,7 +57,7 @@ export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) {
} }
isAnimating = false; isAnimating = false;
document.dispatchEvent(new Event(ANIMATION_END_EVENT)); endCallbacks.runCallbacks();
} }
timeout = window.setTimeout(onEnd, duration); timeout = window.setTimeout(onEnd, duration);