From 28c9d9dc2752cc986265699f56ece2ca053a50f0 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 6 Sep 2024 15:42:34 +0200 Subject: [PATCH] [Perf] Sticker View: Fix unexpected mount before heavy animation --- src/components/common/StickerView.tsx | 6 ++---- src/hooks/useMountAfterHeavyAnimation.ts | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/hooks/useMountAfterHeavyAnimation.ts diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx index 3dd660b27..09173c212 100644 --- a/src/components/common/StickerView.tsx +++ b/src/components/common/StickerView.tsx @@ -14,10 +14,10 @@ import { IS_WEBM_SUPPORTED } from '../../util/windowEnvironment'; import useColorFilter from '../../hooks/stickers/useColorFilter'; import useCoordsInSharedCanvas from '../../hooks/useCoordsInSharedCanvas'; import useFlag from '../../hooks/useFlag'; -import useHeavyAnimationCheck, { isHeavyAnimating } from '../../hooks/useHeavyAnimationCheck'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import useMedia from '../../hooks/useMedia'; import useMediaTransition from '../../hooks/useMediaTransition'; +import useMountAfterHeavyAnimation from '../../hooks/useMountAfterHeavyAnimation'; import useThumbnail from '../../hooks/useThumbnail'; import useUniqueId from '../../hooks/useUniqueId'; import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio'; @@ -115,9 +115,7 @@ const StickerView: FC = ({ const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia); // If Lottie data is loaded we will only render thumb if it's good enough (from preview) const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !previewMediaData)); - // Delay mounting until heavy animation ends - const [isReadyToMount, markReadyToMount, unmarkReadyToMount] = useFlag(!isHeavyAnimating()); - useHeavyAnimationCheck(unmarkReadyToMount, markReadyToMount, isReadyToMount); + const isReadyToMount = useMountAfterHeavyAnimation(); const isFullMediaReady = isReadyToMount && fullMediaData && (isStatic || isPlayerReady); const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb; diff --git a/src/hooks/useMountAfterHeavyAnimation.ts b/src/hooks/useMountAfterHeavyAnimation.ts new file mode 100644 index 000000000..1308bad03 --- /dev/null +++ b/src/hooks/useMountAfterHeavyAnimation.ts @@ -0,0 +1,19 @@ +import { useEffect } from '../lib/teact/teact'; + +import useFlag from './useFlag'; +import { getIsHeavyAnimating } from './useHeavyAnimationCheck'; + +export default function useMountAfterHeavyAnimation() { + const [isReadyToMount, markReadyToMount] = useFlag(false); + + const $getIsHeavyAnimating = getIsHeavyAnimating; + + // Animation is often started right after the mount, so we use effect to check for it on the next frame + useEffect(() => { + if (!$getIsHeavyAnimating()) { + markReadyToMount(); + } + }, [$getIsHeavyAnimating]); + + return isReadyToMount; +}