From a64663701f984b492a2de58e64abfce80e7e4a39 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 13 Apr 2022 16:06:56 +0800
Subject: [PATCH] feat: add page loader animation

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 index.html | 45 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index acd81f109..a48002ab8 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,51 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <meta name="robots" content="noindex,nofollow" />
+    <title>Halo</title>
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <style>
+      body {
+        height: 100%;
+        background-color: #f5f5f5;
+      }
+      #loader {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        border: solid 3px #e5e5e5;
+        border-top-color: #333;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 0.6s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </head>
   <body class="themeable-default">
-    <div id="app"></div>
+    <noscript>
+      <strong>
+        We're sorry but halo admin client doesn't work properly without
+        JavaScript enabled. Please enable it to continue.
+      </strong>
+    </noscript>
+    <div id="app">
+      <div id="loader"></div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
