[front/ux] add loading element

public/index.html

@@ -14,7 +14,12 @@
     <p>Check out no Javascript frontend:</p>
       <li>/hp/:id</li>
   </noscript>
-  <div id="app" classs="bg-gray-900"></div>
+  <div id="app" classs="bg-gray-900">
+    <div class="flex flex-col items-center justify-center h-screen">
+      <div class="loading"></div>
+      <p>Loading</p>
+    </div>
+  </div>
   <script src="/js/main.js"></script>
 </body>
 </html>

src/css/tailwind.css

@@ -18,3 +18,21 @@
 .btn-blue:hover {
     @apply bg-blue-700;
 }
+
+.loading {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(40,40,40,.3);
+  border-radius: 50%;
+  border-top-color: #502020;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/main/frontend/*.cljs'],
+  content: ['./src/main/frontend/*.cljs',
+            './public/*.html'],
   theme: {
     extend: {},
   },