LedgerHQ · valpinkman · Nov 8, 2021 · Sep 16, 2021 · Sep 16, 2021 · Sep 16, 2021
@@ -16,16 +16,14 @@ const appLoaded = () => {
   setTimeout(() => {
     const rendererNode = document.getElementById("react-root");
     const loaderContainer = document.getElementById("loader-container");
-    const loader = document.getElementById("loader");
 
-    if (rendererNode && loaderContainer && loader) {
+    if (rendererNode && loaderContainer) {
       rendererNode.style.visibility = "visible";
       requestAnimationFrame(() => {
-        loader.classList.add("loaded");
-        loaderContainer.classList.remove("loading");
+        loaderContainer.classList.add("loaded");
         setTimeout(() => {
-          loaderContainer.style.display = "none";
-        }, 1000);
+          loaderContainer.remove();
+        }, 3000);
       });
     }
   }, 2000);
@@ -49,7 +47,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   if (imgNode && loaderContainer) {
     imgNode.src = logo;
-    loaderContainer.style.backgroundColor = palette.background.default;
+    loaderContainer.style.backgroundColor = "#000000";
     loaderContainer.classList.add("loading");
   }
 

@@ -12,32 +12,6 @@
         overflow: hidden;
       }
 
-      @keyframes loaded-anim {
-        0% {
-          transform: translateZ(1px);
-        }
-
-        100% {
-          transform: translateZ(2000px);
-        }
-      }
-
-      @keyframes logo-anim {
-        0% {
-          transform: rotate(0);
-          animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-        }
-
-        50% {
-          transform: rotate(-360deg);
-          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-        }
-
-        100% {
-          transform: rotate(-1080deg);
-        }
-      }
-
       #react-root {
         visibility: hidden;
       }
@@ -53,44 +27,97 @@
         align-items: center;
         justify-content: center;
         perspective: 2000px;
-        transition: opacity 0.8s ease-out;
-        opacity: 0;
+        transition: opacity .5s 2s ease-out;
+        opacity: 1;
         pointer-events: none;
+        background-color: black;
       }
 
-      #loader-container.loading {
-        opacity: 1;
+      #loader-container.loaded {
+        opacity: 0;
       }
 
       #loader {
-        width: 70px;
-        height: 70px;
-        background-color: white;
-        border-radius: 50%;
-        padding: 12px;
-        box-sizing: content-box;
+        position: relative;
+        width: 68px;
+        height: 60px;
       }
 
-      #loader.loaded {
-        animation: loaded-anim 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+      #ledger-logo, #bracket-logo-container{
+        position: absolute;
+        height: 100%;
+        width: 290px;
+        top: 0;
+        transition: transform 1s cubic-bezier(0.8, 0.01, 0.2, 0.99);
+        background-color: black;
+        will-change: transform;
+      }
+
+      #ledger-logo {
+        left: 0;
+        z-index: 1;
+      }
+
+      #bracket-logo-container {
+        left: 43px;
+        z-index: 2;
       }
 
-      #loading-logo {
-        animation: logo-anim 1.8s infinite;
+      #loader-container.loaded #ledger-logo{
+        transform: translateX(-130px);
+      }
+
+      #loader-container.loaded #bracket-logo-container{
+        transform: translateX(91px);
+      }
+
+      #bracket-logo {
         height: 100%;
-        width: 100%;
-        user-select: none;
-        pointer-events: none;
+        width: 25px;
       }
     </style>
   </head>
 
   <body>
     <div id="react-root"></div>
     <div id="ll-modal-root"></div>
-    <div id="loader-container">
+    <div id="loader-container" class="loading">
       <div id="loader">
-        <img id="loading-logo" />
+        <svg version="1.1" id="ledger-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+       viewBox="0 0 3258.3 669.3" fill="white">
+    <path d="M2969,627.2v42.1h289.2V479.3h-42.1v147.9H2969z M2969,0v42.1h247.1v147.9h42.1V0H2969z M2829.4,352.9h127.3v-38h-127.3
+      v-86.8H2969v-38h-181.8v289.2h188v-38h-145.9V352.9z M2656.3,479.3l83.5-289.2h-43l-66.5,242.1h-5.8l-63.6-242.1h-44.2l81,289.2
+      H2656.3z M2471.2,190.1h-181.8v37.2h69.8v214.9h-69.8v37.2h181.8v-37.2h-69.8V227.2h69.8V190.1z M2089.8,190.1h-42.1v289.2h190.1
+      v-38h-147.9V190.1z M1958.8,355.3h-148.7v38h148.7V355.3z M1584.9,326v-97.9h66.1c32.2,0,43.8,10.7,43.8,40.1v17.4
+      c0,30.2-11.2,40.5-43.8,40.5H1584.9z M1689.9,343.3c30.2-7.9,51.2-35.9,51.2-69.4c0-21.1-8.3-40.1-24-55.4
+      c-19.8-19-46.3-28.5-80.6-28.5h-93v289.2h41.3V364h62c31.8,0,44.6,13.2,44.6,46.3v69h42.1v-62.4c0-45.4-10.7-62.8-43.8-67.8V343.3z
+       M1342,352.9h127.3v-38H1342v-86.8h139.7v-38h-181.8v289.2h188v-38H1342V352.9z M1203.6,368.1V388c0,41.7-15.3,55.4-53.7,55.4h-9.1
+      c-38.4,0-57-12.4-57-69.8v-77.7c0-57.8,19.4-69.8,57.8-69.8h8.3c37.6,0,49.6,14,50,52.9h45.4c-4.1-57-42.1-93-99.2-93
+      c-27.7,0-50.8,8.7-68.2,25.2c-26,24.4-40.5,65.7-40.5,123.5c0,55.8,12.4,97.1,38,122.7c17.4,16.9,41.3,26,64.9,26
+      c24.8,0,47.5-9.9,59.1-31.4h5.8v27.3h38V330.1h-112v38H1203.6z M839.2,228.1h45c42.6,0,65.7,10.7,65.7,68.6v76
+      c0,57.8-23.1,68.6-65.7,68.6h-45V228.1z M887.9,479.3c78.9,0,108.3-59.9,108.3-144.6c0-85.9-31.4-144.6-109.1-144.6h-89.2v289.2
+      H887.9z M598.3,352.9h127.3v-38H598.3v-86.8h139.7v-38H556.1v289.2h188v-38H598.3V352.9z M331.8,190.1h-42.1v289.2h190.1v-38H331.8
+      V190.1z M0,479.3v190.1h289.2v-42.1H42.1V479.3H0z M0,0v190.1h42.1V42.1h247.1V0H0z"/>
+    </svg>
+    <div id="bracket-logo-container">
+      <svg version="1.1" id="bracket-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 3258.3 669.3" preserveAspectRatio="xMaxYMid slice" fill="white">
+      <path d="M2969,627.2v42.1h289.2V479.3h-42.1v147.9H2969z M2969,0v42.1h247.1v147.9h42.1V0H2969z M2829.4,352.9h127.3v-38h-127.3
+        v-86.8H2969v-38h-181.8v289.2h188v-38h-145.9V352.9z M2656.3,479.3l83.5-289.2h-43l-66.5,242.1h-5.8l-63.6-242.1h-44.2l81,289.2
+        H2656.3z M2471.2,190.1h-181.8v37.2h69.8v214.9h-69.8v37.2h181.8v-37.2h-69.8V227.2h69.8V190.1z M2089.8,190.1h-42.1v289.2h190.1
+        v-38h-147.9V190.1z M1958.8,355.3h-148.7v38h148.7V355.3z M1584.9,326v-97.9h66.1c32.2,0,43.8,10.7,43.8,40.1v17.4
+        c0,30.2-11.2,40.5-43.8,40.5H1584.9z M1689.9,343.3c30.2-7.9,51.2-35.9,51.2-69.4c0-21.1-8.3-40.1-24-55.4
+        c-19.8-19-46.3-28.5-80.6-28.5h-93v289.2h41.3V364h62c31.8,0,44.6,13.2,44.6,46.3v69h42.1v-62.4c0-45.4-10.7-62.8-43.8-67.8V343.3z
+        M1342,352.9h127.3v-38H1342v-86.8h139.7v-38h-181.8v289.2h188v-38H1342V352.9z M1203.6,368.1V388c0,41.7-15.3,55.4-53.7,55.4h-9.1
+        c-38.4,0-57-12.4-57-69.8v-77.7c0-57.8,19.4-69.8,57.8-69.8h8.3c37.6,0,49.6,14,50,52.9h45.4c-4.1-57-42.1-93-99.2-93
+        c-27.7,0-50.8,8.7-68.2,25.2c-26,24.4-40.5,65.7-40.5,123.5c0,55.8,12.4,97.1,38,122.7c17.4,16.9,41.3,26,64.9,26
+        c24.8,0,47.5-9.9,59.1-31.4h5.8v27.3h38V330.1h-112v38H1203.6z M839.2,228.1h45c42.6,0,65.7,10.7,65.7,68.6v76
+        c0,57.8-23.1,68.6-65.7,68.6h-45V228.1z M887.9,479.3c78.9,0,108.3-59.9,108.3-144.6c0-85.9-31.4-144.6-109.1-144.6h-89.2v289.2
+        H887.9z M598.3,352.9h127.3v-38H598.3v-86.8h139.7v-38H556.1v289.2h188v-38H598.3V352.9z M331.8,190.1h-42.1v289.2h190.1v-38H331.8
+        V190.1z M0,479.3v190.1h289.2v-42.1H42.1V479.3H0z M0,0v190.1h42.1V42.1h247.1V0H0z"/>
+      </svg>
+    </div>
+
       </div>
     </div>
     <div id="modals"></div>

@@ -77,6 +77,7 @@ const AccountContainer: ThemedComponent<*> = styled(Box)`
 const Logo: ThemedComponent<*> = styled.img`
   width: 100%;
   height: 100%;
+  object-fit: contain;
 `;
 
 const InfoBoxContainer: ThemedComponent<*> = styled.div`

diff --git a/tests/specs/__image_snapshots__/__start__appUpdater-snap.png b/tests/specs/__image_snapshots__/__start__appUpdater-snap.png
diff --git a/tests/specs/__image_snapshots__/__start__global-snap.png b/tests/specs/__image_snapshots__/__start__global-snap.png