From 55ccd5b79b64db02a506a43de1445359a48bcb66 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Tue, 19 Apr 2022 19:08:13 +0200
Subject: [PATCH] feat: delay initial loading message & tweak design (#5049)

---
 public/index.html                 | 26 +-------------------------
 src/components/LayerUI.tsx        |  2 +-
 src/components/LoadingMessage.tsx | 26 +++++++++++++++++++++++---
 src/css/app.scss                  | 16 +++++++++-------
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index ac961a6c..d802ee0d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -124,26 +124,6 @@
         user-select: none;
       }
 
-      .LoadingMessage {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 999;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-
-      .LoadingMessage span {
-        background-color: var(--button-gray-1);
-        border-radius: 5px;
-        padding: 0.8em 1.2em;
-        color: var(--popup-text-color);
-        font-size: 1.3em;
-      }
       #root {
         height: 100%;
         -webkit-touch-callout: none;
@@ -172,10 +152,6 @@
     <header>
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
-    <div id="root">
-      <div class="LoadingMessage">
-        <span>Loading scene...</span>
-      </div>
-    </div>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index fbe416dc..7e0dabbc 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -492,7 +492,7 @@ const LayerUI = ({
 
   const dialogs = (
     <>
-      {appState.isLoading && <LoadingMessage />}
+      {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
           message={appState.errorMessage}
diff --git a/src/components/LoadingMessage.tsx b/src/components/LoadingMessage.tsx
index 76d1bb87..83fe8040 100644
--- a/src/components/LoadingMessage.tsx
+++ b/src/components/LoadingMessage.tsx
@@ -1,10 +1,30 @@
 import { t } from "../i18n";
+import { useState, useEffect } from "react";
+import Spinner from "./Spinner";
+
+export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
+  const [isWaiting, setIsWaiting] = useState(!!delay);
+
+  useEffect(() => {
+    if (!delay) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setIsWaiting(false);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  if (isWaiting) {
+    return null;
+  }
 
-export const LoadingMessage = () => {
-  // !! KEEP THIS IN SYNC WITH index.html !!
   return (
     <div className="LoadingMessage">
-      <span>{t("labels.loadingScene")}</span>
+      <div>
+        <Spinner />
+      </div>
+      <div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
     </div>
   );
 };
diff --git a/src/css/app.scss b/src/css/app.scss
index a7370c10..a8c93074 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -16,15 +16,17 @@
   left: 0;
   z-index: 999;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   pointer-events: none;
-}
 
-.LoadingMessage span {
-  background-color: var(--button-gray-1);
-  border-radius: 5px;
-  padding: 0.8em 1.2em;
-  color: var(--popup-text-color);
-  font-size: 1.3em;
+  .Spinner {
+    font-size: 2.8em;
+  }
+
+  .LoadingMessage-text {
+    margin-top: 1em;
+    font-size: 0.8em;
+  }
 }