Auth QR Code: Better animation

src/components/auth/Auth.scss

@@ -108,23 +108,39 @@
 }
 
 #auth-qr-form {
-  .qr-container,
-  .qr-loading {
+  .qr-outer {
     height: 280px;
+    position: relative;
   }
 
-  .qr-wrapper {
+  .qr-inner,
+  .qr-loading {
+    height: 280px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     display: flex;
     justify-content: center;
-    position: relative;
+  }
 
+  .qr-inner {
     opacity: 1;
     transform: scale(1);
     transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
-    &.pre-animate {
+
+    &:not(.open) {
       opacity: 0.5;
       transform: scale(0.5);
     }
+
+    &:not(.shown) {
+      display: none;
+    }
+  }
+
+  .qr-loading {
+    transition: opacity 1ms;
   }
 
   .qr-plane {

src/components/auth/AuthQrCode.tsx

@@ -9,6 +9,7 @@ import { LangCode } from '../../types';
 
 import { DEFAULT_LANG_CODE } from '../../config';
 import { setLanguage } from '../../util/langProvider';
+import buildClassName from '../../util/buildClassName';
 import renderText from '../common/helpers/renderText';
 import { getSuggestedLanguage } from './helpers/getSuggestedLanguage';
 import getAnimationData from '../common/helpers/animatedAssets';
@@ -16,6 +17,7 @@ import getAnimationData from '../common/helpers/animatedAssets';
 import useLangString from '../../hooks/useLangString';
 import useFlag from '../../hooks/useFlag';
 import useLang from '../../hooks/useLang';
+import useMediaTransition from '../../hooks/useMediaTransition';
 
 import Loading from '../ui/Loading';
 import Button from '../ui/Button';
@@ -24,9 +26,7 @@ import blankUrl from '../../assets/blank.png';
 
 type StateProps =
   Pick<GlobalState, 'connectionState' | 'authState' | 'authQrCode'>
-  & {
-    language?: LangCode;
-  };
+  & { language?: LangCode };
 
 const DATA_PREFIX = 'tg://login?token=';
 const QR_SIZE = 280;
@@ -73,8 +73,10 @@ const AuthCode: FC<StateProps> = ({
   const [isQrMounted, markQrMounted, unmarkQrMounted] = useFlag();
 
   const [animationData, setAnimationData] = useState<string>();
-  const [isAnimationLoaded, setIsAnimationLoaded] = useState(false);
-  const handleAnimationLoad = useCallback(() => setIsAnimationLoaded(true), []);
+  const [isAnimationLoaded, markAnimationLoaded] = useFlag();
+
+  const transitionClassNames = useMediaTransition(isQrMounted);
+  const airplaneTransitionClassNames = useMediaTransition(isAnimationLoaded);
 
   useEffect(() => {
     if (!animationData) {
@@ -94,9 +96,6 @@ const AuthCode: FC<StateProps> = ({
     }
 
     const container = qrCodeRef.current!;
-
-    container.parentElement!.classList.remove('pre-animate');
-
     const data = `${DATA_PREFIX}${authQrCode.token}`;
 
     QR_CODE.update({
@@ -131,8 +130,11 @@ const AuthCode: FC<StateProps> = ({
   return (
     <div id="auth-qr-form" className="custom-scroll">
       <div className="auth-form qr">
-        {authQrCode ? (
-          <div className="qr-wrapper pre-animate" key="qr-wrapper">
+        <div className="qr-outer">
+          <div
+            className={buildClassName('qr-inner', transitionClassNames)}
+            key="qr-inner"
+          >
             <div
               key="qr-container"
               className="qr-container"
@@ -142,18 +144,17 @@ const AuthCode: FC<StateProps> = ({
             {animationData && (
               <AnimatedSticker
                 id="qrPlane"
-                className="qr-plane"
+                className={buildClassName('qr-plane', airplaneTransitionClassNames)}
                 size={QR_PLANE_SIZE}
                 animationData={animationData}
                 play={isAnimationLoaded}
-                onLoad={handleAnimationLoad}
+                onLoad={markAnimationLoaded}
                 key="qrPlane"
               />
             )}
           </div>
-        ) : (
-          <div key="qr-loading" className="qr-loading"><Loading /></div>
-        )}
+          {!isQrMounted && <div className="qr-loading"><Loading /></div>}
+        </div>
         <h3>{lang('Login.QR.Title')}</h3>
         <ol>
           <li><span>{lang('Login.QR.Help1')}</span></li>