Add waiting message

In dev mode, the message changes after a given timeout to invite user to check if ViteJS is running.
powa-team · May 2, 2023 · 89d3ef3 · 89d3ef3
1 parent f6a037d
commit 89d3ef3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/powa/static/js/waiter.js b/powa/static/js/waiter.js
@@ -0,0 +1,8 @@
+// Vanilla JS to change the loading message
+window.setTimeout(function () {
+  document.getElementById("waiter").innerHTML = "This may take some time…";
+}, 4000);
+window.setTimeout(function () {
+  document.getElementById("waiter").innerHTML =
+    "It's longer than expected!<br>You're runing the dev version.<br>Please make sure ViteJS server is running.";
+}, 10000);
diff --git a/powa/static/styles/main.scss b/powa/static/styles/main.scss
@@ -1,6 +1,3 @@
-[v-cloak] {
-  display: none;
-}
 pre.sql {
   max-height: 400px;
   overflow: auto;

diff --git a/powa/templates/layout.html b/powa/templates/layout.html
@@ -9,8 +9,39 @@
     <meta name="msapplication-TileColor" content="#2b5797">
     <meta name="msapplication-TileImage" content="{{ static_url('img/favicon/mstile-144x144.png') }}">
     {% block header %} {% end %}
+    <style>
+      #mask {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #EFEFEF;
+        font-family: "Roboto", sans-serif;
+        text-align: center;
+      }
+      #mask > * {
+        display: block;
+      }
+
+      [v-cloak] > * { display:none }
+    </style>
   </head>
   <body>
+    <div id="mask" v-cloak>
+      <div>
+        <div style="display: flex; align-items: center; justify-content: center; color: #859145;">
+          <img src="{{ static_url('img/favicon/favicon-32x32.png')}}"/>&nbsp;<b>PoWA</b>
+        </div>
+        <br />
+        loading…
+        <br />
+        <span id="waiter"></span>
+      </div>
+    </div>
     <div id="app" v-cloak>
       <v-app>
         <v-app-bar
@@ -121,7 +152,7 @@
 </script>
     {% end %}
     {% if handler.application.settings['debug'] %}
-      <!-- FIXME -->
+      <script type="text/javascript" src="{{ static_url('js/waiter.js') }}"></script>
       <script type="module" src="http://localhost:5173/powa/static/js/main.js"></script>
     {% else %}
       {% raw inject_assets("powa/static/js/main.js") %}