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

[Perf] Message / Reactions: Drop ineffective shouldDelayInit optimization

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-09-06 15:42:37 +02:00
parent 3ac3ad394b
commit ec6a28baf6
5 changed files with 0 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/reactions/ReactionAnimatedEmoji.tsx
View File

@ -36,7 +36,6 @@ type OwnProps = {
shouldPause?: boolean; shouldPause?: boolean;
shouldLoop?: boolean; shouldLoop?: boolean;
loopLimit?: number; loopLimit?: number;
shouldDelayInit?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
}; };
@ -67,7 +66,6 @@ const ReactionAnimatedEmoji = ({
shouldPause, shouldPause,
shouldLoop, shouldLoop,
loopLimit, loopLimit,
shouldDelayInit,
observeIntersection, observeIntersection,
}: OwnProps & StateProps) => { }: OwnProps & StateProps) => {
const { stopActiveReaction } = getActions(); const { stopActiveReaction } = getActions();
@ -169,7 +167,6 @@ const ReactionAnimatedEmoji = ({
size={size} size={size}
noPlay={shouldPause} noPlay={shouldPause}
loopLimit={loopLimit} loopLimit={loopLimit}
forceAlways={!shouldDelayInit}
observeIntersectionForPlaying={observeIntersection} observeIntersectionForPlaying={observeIntersection}
/> />
)} )}
@ -181,7 +178,6 @@ const ReactionAnimatedEmoji = ({
tgsUrl={mediaDataCenterIcon} tgsUrl={mediaDataCenterIcon}
play={isIntersecting && !shouldPause} play={isIntersecting && !shouldPause}
noLoop={!shouldLoop} noLoop={!shouldLoop}
forceAlways={!shouldDelayInit}
onLoad={markAnimationLoaded} onLoad={markAnimationLoaded}
onEnded={unmarkAnimationLoaded} onEnded={unmarkAnimationLoaded}
/> />
@ -195,7 +191,6 @@ const ReactionAnimatedEmoji = ({
tgsUrl={mediaDataEffect} tgsUrl={mediaDataEffect}
play={isIntersecting} play={isIntersecting}
noLoop noLoop
forceAlways={!shouldDelayInit}
onEnded={handleEnded} onEnded={handleEnded}
/> />
{isCustom && !assignedEffectId && isIntersecting && ( {isCustom && !assignedEffectId && isIntersecting && (

2
src/components/middle/message/Message.tsx
View File

@ -1045,7 +1045,6 @@ const Message: FC<OwnProps & StateProps> = ({
noRecentReactors={isChannel} noRecentReactors={isChannel}
tags={tags} tags={tags}
isCurrentUserPremium={isPremium} isCurrentUserPremium={isPremium}
getIsMessageListReady={getIsMessageListReady}
/> />
); );
} }
@ -1650,7 +1649,6 @@ const Message: FC<OwnProps & StateProps> = ({
observeIntersection={observeIntersectionForPlaying} observeIntersection={observeIntersectionForPlaying}
noRecentReactors={isChannel} noRecentReactors={isChannel}
tags={tags} tags={tags}
getIsMessageListReady={getIsMessageListReady}
/> />
)} )}
</div> </div>

3
src/components/middle/message/reactions/ReactionButton.tsx
View File

@ -28,7 +28,6 @@ type OwnProps = {
recentReactors?: ApiPeer[]; recentReactors?: ApiPeer[];
className?: string; className?: string;
chosenClassName?: string; chosenClassName?: string;
shouldDelayInit?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
onClick?: (reaction: ApiReaction) => void; onClick?: (reaction: ApiReaction) => void;
}; };
@ -40,7 +39,6 @@ const ReactionButton = ({
recentReactors, recentReactors,
className, className,
chosenClassName, chosenClassName,
shouldDelayInit,
observeIntersection, observeIntersection,
onClick, onClick,
}: OwnProps) => { }: OwnProps) => {
@ -66,7 +64,6 @@ const ReactionButton = ({
reaction={reaction.reaction} reaction={reaction.reaction}
size={REACTION_SIZE} size={REACTION_SIZE}
observeIntersection={observeIntersection} observeIntersection={observeIntersection}
shouldDelayInit={shouldDelayInit}
/> />
{recentReactors?.length ? ( {recentReactors?.length ? (
<AvatarList size="mini" peers={recentReactors} /> <AvatarList size="mini" peers={recentReactors} />

8
src/components/middle/message/reactions/Reactions.tsx
View File

@ -11,14 +11,12 @@ import type {
} from '../../../../api/types'; } from '../../../../api/types';
import type { ObserveFn } from '../../../../hooks/useIntersectionObserver'; import type { ObserveFn } from '../../../../hooks/useIntersectionObserver';
import type { ThreadId } from '../../../../types'; import type { ThreadId } from '../../../../types';
import type { Signal } from '../../../../util/signals';
import { getReactionKey, isReactionChosen } from '../../../../global/helpers'; import { getReactionKey, isReactionChosen } from '../../../../global/helpers';
import { selectPeer } from '../../../../global/selectors'; import { selectPeer } from '../../../../global/selectors';
import buildClassName from '../../../../util/buildClassName'; import buildClassName from '../../../../util/buildClassName';
import { getMessageKey } from '../../../../util/keys/messageKey'; import { getMessageKey } from '../../../../util/keys/messageKey';
import useDerivedState from '../../../../hooks/useDerivedState';
import useLastCallback from '../../../../hooks/useLastCallback'; import useLastCallback from '../../../../hooks/useLastCallback';
import useOldLang from '../../../../hooks/useOldLang'; import useOldLang from '../../../../hooks/useOldLang';
@ -37,7 +35,6 @@ type OwnProps = {
isCurrentUserPremium?: boolean; isCurrentUserPremium?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
noRecentReactors?: boolean; noRecentReactors?: boolean;
getIsMessageListReady: Signal<boolean>;
}; };
const MAX_RECENT_AVATARS = 3; const MAX_RECENT_AVATARS = 3;
@ -52,7 +49,6 @@ const Reactions: FC<OwnProps> = ({
noRecentReactors, noRecentReactors,
isCurrentUserPremium, isCurrentUserPremium,
tags, tags,
getIsMessageListReady,
}) => { }) => {
const { const {
toggleReaction, toggleReaction,
@ -68,8 +64,6 @@ const Reactions: FC<OwnProps> = ({
results.reduce((acc, reaction) => acc + reaction.count, 0) results.reduce((acc, reaction) => acc + reaction.count, 0)
), [results]); ), [results]);
const isMessageListReady = useDerivedState(getIsMessageListReady);
const recentReactorsByReactionKey = useMemo(() => { const recentReactorsByReactionKey = useMemo(() => {
const global = getGlobal(); const global = getGlobal();
@ -158,7 +152,6 @@ const Reactions: FC<OwnProps> = ({
onClick={handleClick} onClick={handleClick}
onRemove={handleRemoveReaction} onRemove={handleRemoveReaction}
observeIntersection={observeIntersection} observeIntersection={observeIntersection}
shouldDelayInit={!isMessageListReady}
/> />
) : ( ) : (
<ReactionButton <ReactionButton
@ -171,7 +164,6 @@ const Reactions: FC<OwnProps> = ({
reaction={reaction} reaction={reaction}
onClick={handleClick} onClick={handleClick}
observeIntersection={observeIntersection} observeIntersection={observeIntersection}
shouldDelayInit={!isMessageListReady}
/> />
) )
))} ))}

3
src/components/middle/message/reactions/SavedTagButton.tsx
View File

@ -38,7 +38,6 @@ type OwnProps = {
chosenClassName?: string; chosenClassName?: string;
isDisabled?: boolean; isDisabled?: boolean;
withContextMenu?: boolean; withContextMenu?: boolean;
shouldDelayInit?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
onClick?: (reaction: ApiReaction) => void; onClick?: (reaction: ApiReaction) => void;
onRemove?: (reaction: ApiReaction) => void; onRemove?: (reaction: ApiReaction) => void;
@ -55,7 +54,6 @@ const SavedTagButton = ({
withCount, withCount,
isDisabled, isDisabled,
withContextMenu, withContextMenu,
shouldDelayInit,
observeIntersection, observeIntersection,
onClick, onClick,
onRemove, onRemove,
@ -141,7 +139,6 @@ const SavedTagButton = ({
loopLimit={LOOP_LIMIT} loopLimit={LOOP_LIMIT}
size={REACTION_SIZE} size={REACTION_SIZE}
observeIntersection={observeIntersection} observeIntersection={observeIntersection}
shouldDelayInit={shouldDelayInit}
/> />
{hasText && ( {hasText && (
<span className={styles.tagText}> <span className={styles.tagText}>