feat: delay initial loading message & tweak design (#5049)

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}

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>
   );
 };