Loading screen progressbar improvements

background.html

@@ -101,10 +101,12 @@
         <div class="module-title-bar-drag-area"></div>
 
         <div class="module-splash-screen__logo module-img--150"></div>
-        <div class="app-loading-screen__progress--container">
-          <div class="app-loading-screen__progress--bar"></div>
+        <div class="container">
+          <span class="dot"></span>
+          <span class="dot"></span>
+          <span class="dot"></span>
         </div>
-        <div class="message">&nbsp;</div>
+        <div class="message-placeholder"></div>
       </div>
     </div>
 

stylesheets/_global.scss

@@ -216,6 +216,15 @@ $loading-height: 16px;
   }
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .app-migration-screen {
   display: flex;
   flex-direction: column;
@@ -251,11 +260,10 @@ $loading-height: 16px;
   justify-content: center;
   user-select: none;
 
-  /* Currently only used in loading window */
   .container {
     display: flex;
     gap: 7px;
-    margin: 8px 0 24px 0;
+    margin: 6px 0 22px 0;
 
     .dot {
       width: 14px;
@@ -278,13 +286,15 @@ $loading-height: 16px;
 
   &__progress {
     &--container {
+      animation: fade-in 150ms ease 1 0ms;
+
       background: $color-white-alpha-20;
       border-radius: 2px;
       height: 4px;
       max-width: 400px;
       overflow: hidden;
       width: 100%;
-      margin: 16px 0 24px 0;
+      margin: 12px 0 26px 0;
     }
 
     &--bar {
@@ -294,12 +304,16 @@ $loading-height: 16px;
       height: 100%;
       width: 100%;
       transform: translateX(-100%);
-      transition: transform 500ms ease-out;
+      transition: transform 500ms linear;
     }
   }
   .message {
+    animation: fade-in 150ms ease 1 0ms;
     max-width: 35em;
   }
+  .message-placeholder {
+    height: 20px;
+  }
 }
 
 .full-screen-flow {

ts/components/Inbox.tsx

@@ -202,7 +202,7 @@ export function Inbox({
         ) * 100;
     }
 
-    let message = i18n('icu:loading');
+    let message: string | undefined;
     if (envelopeTimestamp !== undefined) {
       const daysBeforeMidnight = Math.ceil(
         (midnight - envelopeTimestamp) / DAY
@@ -224,13 +224,25 @@ export function Inbox({
         <div className="module-title-bar-drag-area" />
 
         <div className="module-splash-screen__logo module-img--150" />
-        <div className="app-loading-screen__progress--container">
-          <div
-            className="app-loading-screen__progress--bar"
-            style={{ transform: `translateX(${loadingProgress - 100}%)` }}
-          />
-        </div>
-        <div className="message">{message}</div>
+        {envelopeTimestamp === undefined ? (
+          <div className="container">
+            <span className="dot" />
+            <span className="dot" />
+            <span className="dot" />
+          </div>
+        ) : (
+          <div className="app-loading-screen__progress--container">
+            <div
+              className="app-loading-screen__progress--bar"
+              style={{ transform: `translateX(${loadingProgress - 100}%)` }}
+            />
+          </div>
+        )}
+        {message === undefined ? (
+          <div className="message-placeholder" />
+        ) : (
+          <div className="message">{message}</div>
+        )}
         <div id="toast" />
       </div>
     );