Add loading indicator

Is displayed during the time when the App is initially fetched.
chatch · Jul 20, 2018 · f3acbbe · f3acbbe
1 parent 762a527
commit f3acbbe
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -8,8 +8,29 @@
     <link rel="search" href="%PUBLIC_URL%/search.xml"
           title="Stellar Explorer" type="application/opensearchdescription+xml">
     <title>Stellar Explorer</title>
+
+    <style type="text/css">
+      body { background-color: #3c4452 !important; }
+      #loading-indicator { width:100%; height:100%; color:#07a2cc; font-size:1.6em; text-align:center; margin-top: 20%; }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div id="loading-indicator"></div>
+    </div>
+
+    <script type="text/javascript">
+      var count = 0;
+      const loadingIndicator = setInterval(() => {
+        const indicator = document.getElementById('loading-indicator');
+        if (!indicator) {
+          clearInterval(loadingIndicator);
+          return;
+        }
+
+        count++;
+        indicator.innerHTML = new Array(count % 10).join('.');
+      }, 100);
+    </script>
   </body>
 </html>