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

Message / Reaction Selector: Get rid of redundant animation and flickering

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-09-21 01:50:44 +02:00
parent a44da981cf
commit c95f9daabb
1 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/middle/message/ReactionSelectorReaction.tsx
View File

@ -3,11 +3,10 @@ import React, { memo, useRef } from '../../../lib/teact/teact';
import type { ApiAvailableReaction } from '../../../api/types'; import type { ApiAvailableReaction } from '../../../api/types';
import { IS_COMPACT_MENU } from '../../../util/environment';
import { createClassNameBuilder } from '../../../util/buildClassName';
import useMedia from '../../../hooks/useMedia'; import useMedia from '../../../hooks/useMedia';
import useFlag from '../../../hooks/useFlag'; import useFlag from '../../../hooks/useFlag';
import useShowTransition from '../../../hooks/useShowTransition';
import { createClassNameBuilder } from '../../../util/buildClassName';
import { IS_COMPACT_MENU } from '../../../util/environment';
import AnimatedSticker from '../../common/AnimatedSticker'; import AnimatedSticker from '../../common/AnimatedSticker';
@ -36,11 +35,8 @@ const ReactionSelectorReaction: FC<OwnProps> = ({
const [isActivated, activate, deactivate] = useFlag(); const [isActivated, activate, deactivate] = useFlag();
const [isAnimationLoaded, markAnimationLoaded] = useFlag(); const [isAnimationLoaded, markAnimationLoaded] = useFlag();
const shouldRenderStatic = !isReady || !isAnimationLoaded;
const shouldRenderAnimated = Boolean(isReady && mediaData); const shouldRenderAnimated = Boolean(isReady && mediaData);
const { transitionClassNames: animatedClassNames } = useShowTransition(shouldRenderAnimated);
const { shouldRender: shouldRenderStatic, transitionClassNames: staticClassNames } = useShowTransition(
!isReady || !isAnimationLoaded, undefined, true,
);
function handleClick() { function handleClick() {
if (!containerRef.current) return; if (!containerRef.current) return;
@ -61,14 +57,12 @@ const ReactionSelectorReaction: FC<OwnProps> = ({
className={cn( className={cn(
'static', 'static',
isCurrentUserPremium && 'premium', isCurrentUserPremium && 'premium',
isReady ? [staticClassNames] : undefined,
)} )}
style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`} style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`}
/> />
)} )}
{shouldRenderAnimated && ( {shouldRenderAnimated && (
<AnimatedSticker <AnimatedSticker
className={cn('animated', [animatedClassNames])}
tgsUrl={mediaData} tgsUrl={mediaData}
play={isActivated} play={isActivated}
noLoop noLoop