Media Viewer: Blinks before ghost animation (#2514)

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

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) {