added a loader during the initial app start-up, issue cboard-org#1108

public/index.css

@@ -0,0 +1,33 @@
+.loader {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  box-sizing: border-box;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+/* .background {
+    height: 100%;
+    padding: 1.5rem;
+    position: relative;
+    color: #eceff1;
+    overflow: auto;
+    background: url('/images/bg/bg-pattern.png'),
+      linear-gradient(to right, rgb(121, 22, 254), rgb(172, 47, 138));
+} */
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

public/index.html

@@ -19,6 +19,9 @@
     img-src * data:  filesystem:  blob:  ;
     ">
 
+  <!-- Link CSS for the load screen -->
+  <link rel="stylesheet" href="index.css">
+
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -72,7 +75,9 @@
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
-  <div id="root"></div>
+  <div id="root">
+      <div class="loader"></div>
+  </div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.