feat: Add app loader (#17558)

przemvs · web-flow · commit c678bb8e4eab · 2024-06-17T18:18:18.000+02:00
* feat: Add app loader

* app loader improvements

* add german translation

* cr changes

* move loadingMessage into setTimeout
diff --git a/src/page/index.ejs b/src/page/index.ejs
@@ -24,7 +24,71 @@
   </head>
 
   <body>
-    <main id="wire-app"></main>
+    <main id="wire-app">
+        <style>
+          body {
+            margin: 0;
+          }
+
+          #loader-root {
+            align-items: center;
+            background-color: #fafafa;
+            color: #676b71;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: center;
+            position: absolute;
+            width: 100%;
+          }
+
+          .loading-spinner {
+            width: 24px;
+            height: 24px;
+            border: 3px solid #000;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+          }
+
+          #loading-message {
+            display: none;
+            margin-top: 20px;
+            padding-inline: 16px;
+          }
+
+          #loading-message p {
+            color: #676B71;
+            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+            font-size: 12px;
+            line-height: 14px;
+            margin: 0;
+            text-align: center;
+          }
+
+          #loading-message.visible {
+            display: block;
+          }
+
+          @keyframes rotation {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+        </style>
+
+        <div id="loader-root">
+            <div class="loading-spinner"></div>
+            <div id="loading-message"></div>
+        </div>
+    </main>
+
+    <script src="./min/loader.js?<%= VERSION %>"></script>
     <script src="./config.js?<%= VERSION %>"></script>
     <script src="./min/dexie.js?<%= VERSION %>"></script>
     <script src="./min/vendor.js?<%= VERSION %>"></script>
diff --git a/src/page/loader.js b/src/page/loader.js
@@ -0,0 +1,44 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+const HALF_MINUTE_IN_MS = 30000;
+
+const translations = {
+  de: `<p>Laden von Wire dauert länger als erwartet.</p><p>Bitte überprüfen Sie Ihre Internetverbindung.</p>`,
+  en: `<p>Loading Wire takes longer than expected.</p><p>Please check your internet connection.</p>`,
+};
+
+const userLang = navigator.language;
+
+setTimeout(() => {
+  const loadingMessage = document.getElementById('loading-message');
+
+  if (!loadingMessage) {
+    return;
+  }
+
+  // TODO: If there will be more translations, we have to change this functionality..
+  if (userLang.startsWith('de')) {
+    loadingMessage.innerHTML = translations['de'];
+  } else {
+    loadingMessage.innerHTML = translations['en'];
+  }
+
+  loadingMessage.classList.add('visible');
+}, HALF_MINUTE_IN_MS);
diff --git a/webpack.config.common.js b/webpack.config.common.js
@@ -162,6 +162,7 @@ module.exports = {
         {from: 'resource', to: dist},
         {from: `assets`, to: `${dist}/assets`},
         {from: 'src/page/basicBrowserFeatureCheck.js', to: `${dist}/min/`},
+        {from: 'src/page/loader.js', to: `${dist}/min/`},
       ],
     }),
     new webpack.IgnorePlugin({resourceRegExp: /.*\.wasm/}),
