From d64afd5a4f70c1571f58ad41ab3c3eb1a9b0eb02 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 8 Feb 2023 13:48:40 +0100
Subject: [PATCH] Media Viewer: Blinks before ghost animation (#2514)

---
 src/components/mediaViewer/MediaViewer.tsx | 1 +
 src/components/ui/ShowTransition.tsx       | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx
index 944e3f48c..94e3dea7d 100644
--- a/src/components/mediaViewer/MediaViewer.tsx
+++ b/src/components/mediaViewer/MediaViewer.tsx
@@ -304,6 +304,7 @@ const MediaViewer: FC<StateProps> = ({
       id="MediaViewer"
       isOpen={isOpen}
       isHidden={isHidden}
+      shouldAnimateFirstRender
       noCloseTransition={shouldSkipHistoryAnimations}
     >
       <div className="media-viewer-head" dir={lang.isRtl ? 'rtl' : undefined}>
diff --git a/src/components/ui/ShowTransition.tsx b/src/components/ui/ShowTransition.tsx
index 628057b27..819284d12 100644
--- a/src/components/ui/ShowTransition.tsx
+++ b/src/components/ui/ShowTransition.tsx
@@ -13,6 +13,7 @@ type OwnProps = {
   className?: string;
   onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   noCloseTransition?: boolean;
+  shouldAnimateFirstRender?: boolean;
   children: React.ReactNode;
 };
 
@@ -25,6 +26,7 @@ const ShowTransition: FC<OwnProps> = ({
   onClick,
   children,
   noCloseTransition,
+  shouldAnimateFirstRender,
 }) => {
   const prevIsOpen = usePrevious(isOpen);
   const prevChildren = usePrevious(children);
@@ -34,7 +36,11 @@ const ShowTransition: FC<OwnProps> = ({
     shouldRender,
     transitionClassNames,
   } = useShowTransition(
-    isOpen && !isHidden, undefined, isFirstRender, isCustom ? false : undefined, noCloseTransition,
+    isOpen && !isHidden,
+    undefined,
+    isFirstRender && !shouldAnimateFirstRender,
+    isCustom ? false : undefined,
+    noCloseTransition,
   );
 
   if (prevIsOpen && !isOpen) {