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

[Perf] Sticker View: Fix unexpected mount before heavy animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-09-06 15:42:34 +02:00
parent 08ad256c70
commit 28c9d9dc27
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/StickerView.tsx
View File

@ -14,10 +14,10 @@ import { IS_WEBM_SUPPORTED } from '../../util/windowEnvironment';
import useColorFilter from '../../hooks/stickers/useColorFilter'; import useColorFilter from '../../hooks/stickers/useColorFilter';
import useCoordsInSharedCanvas from '../../hooks/useCoordsInSharedCanvas'; import useCoordsInSharedCanvas from '../../hooks/useCoordsInSharedCanvas';
import useFlag from '../../hooks/useFlag'; import useFlag from '../../hooks/useFlag';
import useHeavyAnimationCheck, { isHeavyAnimating } from '../../hooks/useHeavyAnimationCheck';
import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useMediaTransition from '../../hooks/useMediaTransition'; import useMediaTransition from '../../hooks/useMediaTransition';
import useMountAfterHeavyAnimation from '../../hooks/useMountAfterHeavyAnimation';
import useThumbnail from '../../hooks/useThumbnail'; import useThumbnail from '../../hooks/useThumbnail';
import useUniqueId from '../../hooks/useUniqueId'; import useUniqueId from '../../hooks/useUniqueId';
import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio'; import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio';
@ -115,9 +115,7 @@ const StickerView: FC<OwnProps> = ({
const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia); const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia);
// If Lottie data is loaded we will only render thumb if it's good enough (from preview) // 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)); const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !previewMediaData));
// Delay mounting until heavy animation ends const isReadyToMount = useMountAfterHeavyAnimation();
const [isReadyToMount, markReadyToMount, unmarkReadyToMount] = useFlag(!isHeavyAnimating());
useHeavyAnimationCheck(unmarkReadyToMount, markReadyToMount, isReadyToMount);
const isFullMediaReady = isReadyToMount && fullMediaData && (isStatic || isPlayerReady); const isFullMediaReady = isReadyToMount && fullMediaData && (isStatic || isPlayerReady);
const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb; const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb;

19
src/hooks/useMountAfterHeavyAnimation.ts Normal file
View File

@ -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;
}