From d5e58793404b0ae864b1011d7136455bcce2b13f Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Fri, 25 Mar 2022 03:07:29 -0700
Subject: [PATCH] Add css app loading page

---
 frontend/static/css/index.css          | 26 ++++++++++++++++++++++++++
 frontend/templates/frontend/index.html |  8 +++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index eceab66d..183fb117 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -18,6 +18,32 @@ body {
   height: 100%;
 }
 
+.loaderCenter{
+  margin:0 auto;
+  position: absolute;
+  left:50%;
+  top:50%;
+  margin-left:-76px;
+  margin-top:-60px;
+  width:170px;
+  height:120px;
+}
+.loaderSpinner {
+  position: relative;
+  border: 16px solid #f3f3f3; 
+  border-top: 16px solid #1976d2;
+  border-bottom: 16px solid #9c27b0;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .appCenter {
   position: absolute;
   top: 50%;
diff --git a/frontend/templates/frontend/index.html b/frontend/templates/frontend/index.html
index 2533de6c..cc9a1140 100644
--- a/frontend/templates/frontend/index.html
+++ b/frontend/templates/frontend/index.html
@@ -23,7 +23,13 @@
       </div>
     </noscript>
     <div id="main">
-      <div id="app"></div>
+      <div id="app">
+        <div class="loaderCenter">
+          <div class="loaderSpinner"></div>
+          <br/>
+          <div>Fetching robot parts ...</div>
+        </div>
+      </div>
     </div>
 
     <script src="{% static "frontend/main.js" %}"></script>