From de37fd6dda2786adab5f938f4b82d3fa77c19c72 Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:44:14 +0400
Subject: [PATCH] Status Picker: Fix flicker on closing (#5273)

---
 src/components/common/CustomEmojiPicker.tsx | 9 ++++++---
 src/components/common/StickerView.tsx       | 9 +++++----
 src/components/left/main/StatusButton.tsx   | 2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/common/CustomEmojiPicker.tsx b/src/components/common/CustomEmojiPicker.tsx
index 65f830e7f..2834fb2c3 100644
--- a/src/components/common/CustomEmojiPicker.tsx
+++ b/src/components/common/CustomEmojiPicker.tsx
@@ -36,6 +36,7 @@ import useAppLayout from '../../hooks/useAppLayout';
 import useHorizontalScroll from '../../hooks/useHorizontalScroll';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
+import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
 import useScrolledState from '../../hooks/useScrolledState';
 import useAsyncRendering from '../right/hooks/useAsyncRendering';
 import { useStickerPickerObservers } from './hooks/useStickerPickerObservers';
@@ -169,6 +170,8 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
     selectStickerSet,
   } = useStickerPickerObservers(containerRef, headerRef, prefix, isHidden);
 
+  const canLoadAndPlay = usePrevDuringAnimation(loadAndPlay || undefined, SLIDE_TRANSITION_DURATION);
+
   const lang = useOldLang();
 
   const areAddedLoaded = Boolean(addedCustomEmojiIds);
@@ -344,7 +347,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
           ) : (
             <StickerSetCover
               stickerSet={stickerSet as ApiStickerSet}
-              noPlay={!canAnimate || !loadAndPlay}
+              noPlay={!canAnimate || !canLoadAndPlay}
               forcePlayback
               observeIntersection={observeIntersectionForCovers}
               sharedCanvasRef={withSharedCanvas ? (isHq ? sharedCanvasHqRef : sharedCanvasRef) : undefined}
@@ -361,7 +364,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
         size={STICKER_SIZE_PICKER_HEADER}
         title={stickerSet.title}
         className={buttonClassName}
-        noPlay={!canAnimate || !loadAndPlay}
+        noPlay={!canAnimate || !canLoadAndPlay}
         observeIntersection={observeIntersectionForCovers}
         noContextMenu
         isCurrentUserPremium
@@ -427,7 +430,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
             <StickerSet
               key={stickerSet.id}
               stickerSet={stickerSet}
-              loadAndPlay={Boolean(canAnimate && loadAndPlay)}
+              loadAndPlay={Boolean(canAnimate && canLoadAndPlay)}
               index={i}
               idPrefix={prefix}
               observeIntersection={observeIntersectionForSet}
diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx
index 11b3c74d5..20acc75bf 100644
--- a/src/components/common/StickerView.tsx
+++ b/src/components/common/StickerView.tsx
@@ -116,11 +116,11 @@ const StickerView: FC<OwnProps> = ({
   const previewMediaData = useMedia(previewMediaHash, !shouldLoadPreview);
   const withPreview = shouldLoadPreview || cachedPreview;
 
-  const shouldSkipFullMedia = Boolean(shouldForcePreview || (
+  const shouldSkipLoadingFullMedia = Boolean(shouldForcePreview || (
     fullMediaHash === previewMediaHash && (cachedPreview || previewMediaData)
   ));
-  const fullMediaData = useMedia(fullMediaHash || `sticker${id}`, !shouldLoad || shouldSkipFullMedia);
-  const shouldRenderFullMedia = isReadyToMountFullMedia && !shouldSkipFullMedia && fullMediaData && !isVideoBroken;
+  const fullMediaData = useMedia(fullMediaHash || `sticker${id}`, !shouldLoad || shouldSkipLoadingFullMedia);
+  const shouldRenderFullMedia = isReadyToMountFullMedia && fullMediaData && !isVideoBroken;
   const [isPlayerReady, markPlayerReady] = useFlag();
   const isFullMediaReady = shouldRenderFullMedia && (isStatic || isPlayerReady);
 
@@ -148,7 +148,8 @@ const StickerView: FC<OwnProps> = ({
     size,
     (withSharedAnimation ? customColor : undefined),
     dpr,
-  ].filter(Boolean).join('_')), [customColor, dpr, id, randomIdPrefix, size, withSharedAnimation]);
+  ].filter(Boolean).join('_')
+  ), [id, size, customColor, dpr, withSharedAnimation, randomIdPrefix]);
 
   return (
     <>
diff --git a/src/components/left/main/StatusButton.tsx b/src/components/left/main/StatusButton.tsx
index 062255239..ab4967c6b 100644
--- a/src/components/left/main/StatusButton.tsx
+++ b/src/components/left/main/StatusButton.tsx
@@ -40,7 +40,7 @@ const StatusButton: FC<StateProps> = ({ emojiStatus }) => {
   useTimeout(loadCurrentUser, delay);
 
   useEffectWithPrevDeps(([prevEmojiStatus]) => {
-    if (shouldShowEffect && emojiStatus && prevEmojiStatus && emojiStatus.documentId !== prevEmojiStatus.documentId) {
+    if (shouldShowEffect && emojiStatus && emojiStatus.documentId !== prevEmojiStatus?.documentId) {
       showEffect();
       unmarkShouldShowEffect();
     }