UI Loader: Fixes for preload animation

src/components/common/UiLoader.module.scss

@@ -1,7 +1,8 @@
-.root {
+.bg {
   height: 100%;
 
   background-color: var(--theme-background-color);
+  background-position: center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
 
@@ -48,8 +49,12 @@
   height: 100%;
   z-index: var(--z-ui-loader-mask);
   display: flex;
+}
 
-  @media (min-width: 600px) {
+.main {
+  flex: 1;
+
+  @media (min-width: 926px) {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: 100%;
@@ -62,6 +67,7 @@
   min-width: 12rem;
   width: 33vw;
   max-width: 26.5rem;
+  height: 100%;
 
   @media (min-width: 926px) {
     max-width: 40vw;
@@ -89,10 +95,10 @@
 .middle {
   flex: 3;
   border-left: 1px solid var(--color-borders);
-  border-right: 1px solid var(--color-borders);
   position: relative;
   z-index: 1;
   overflow: hidden;
+  background-size: cover !important;
 
   @media (max-width: 1275px) {
     border-right: none;
@@ -116,5 +122,5 @@
 
 .blank {
   flex: 1;
-  background: var(--color-background);
+  background-color: var(--color-background);
 }

src/components/common/UiLoader.tsx

@@ -29,6 +29,7 @@ import monkeyPath from '../../assets/monkey.svg';
 export type UiLoaderPage =
   'main'
   | 'lock'
+  | 'inactive'
   | 'authCode'
   | 'authPassword'
   | 'authPhoneNumber'
@@ -89,6 +90,8 @@ const preloadTasks = {
     preloadFonts(),
     preloadImage(lockPreviewPath),
   ]),
+  inactive: () => {
+  },
 };
 
 const UiLoader: FC<OwnProps & StateProps> = ({
@@ -144,21 +147,23 @@ const UiLoader: FC<OwnProps & StateProps> = ({
   return (
     <div
       id="UiLoader"
-      className={styles.root}
+      className={styles.bg}
       style={`--theme-background-color: ${theme === 'dark' ? DARK_THEME_BG_COLOR : LIGHT_THEME_BG_COLOR}`}
     >
       {children}
       {shouldRenderMask && !shouldSkipHistoryAnimations && Boolean(page) && (
         <div className={buildClassName(styles.mask, transitionClassNames)}>
           {page === 'main' ? (
-            <>
+            <div className={styles.main}>
               <div
                 className={styles.left}
                 style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
               />
-              <div className={buildClassName(styles.middle, transitionClassNames)} />
+              <div className={buildClassName(styles.middle, styles.bg)} />
               {isRightColumnShown && <div className={styles.right} />}
-            </>
+            </div>
+          ) : (page === 'inactive' || page === 'lock') ? (
+            <div className={buildClassName(styles.blank, styles.bg)} />
           ) : (
             <div className={styles.blank} />
           )}

src/components/main/LockScreen.tsx

@@ -8,7 +8,6 @@ import type { GlobalState } from '../../global/types';
 
 import { LOCAL_TGS_URLS } from '../common/helpers/animatedAssets';
 import useLang from '../../hooks/useLang';
-import buildClassName from '../../util/buildClassName';
 import { decryptSession } from '../../util/passcode';
 import useShowTransition from '../../hooks/useShowTransition';
 import useTimeout from '../../hooks/useTimeout';
@@ -55,7 +54,7 @@ const LockScreen: FC<OwnProps & StateProps> = ({
   const [validationError, setValidationError] = useState<string>('');
   const [shouldShowPasscode, setShouldShowPasscode] = useState(false);
   const [isSignOutDialogOpen, openSignOutConfirmation, closeSignOutConfirmation] = useFlag(false);
-  const { transitionClassNames, shouldRender } = useShowTransition(isLocked);
+  const { shouldRender } = useShowTransition(isLocked);
 
   useTimeout(
     resetInvalidUnlockAttempts,
@@ -115,7 +114,7 @@ const LockScreen: FC<OwnProps & StateProps> = ({
   }
 
   return (
-    <div className={buildClassName(styles.container, transitionClassNames)}>
+    <div className={styles.container}>
       <div className={styles.wrapper} dir={lang.isRtl ? 'rtl' : undefined}>
         <AnimatedIconWithPreview
           tgsUrl={LOCAL_TGS_URLS.Lock}