From aba8882d0a285ee88c4589c31fcfb9e3e34d541e Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Fri, 31 Mar 2023 16:10:11 -0700
Subject: [PATCH] Loading screen progressbar improvements

---
 background.html          |  8 +++++---
 stylesheets/_global.scss | 22 ++++++++++++++++++----
 ts/components/Inbox.tsx  | 28 ++++++++++++++++++++--------
 3 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/background.html b/background.html
index 9f6f0f9be..6a99d42bd 100644
--- a/background.html
+++ b/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>
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index e1a553506..0af6f6f2f 100644
--- a/stylesheets/_global.scss
+++ b/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 {
diff --git a/ts/components/Inbox.tsx b/ts/components/Inbox.tsx
index d7737cd16..0e654476d 100644
--- a/ts/components/Inbox.tsx
+++ b/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>
     );