From bc33bd48e8d5eec006b0c74ee2c3188d0c0fb8dd Mon Sep 17 00:00:00 2001
From: Florian Briand <florian.briand@digital-engine.info>
Date: Mon, 23 Sep 2024 17:43:32 +0200
Subject: [PATCH] feat: add a loader for SPA javascript loading

---
 frontend/app/spa-loading-template.html | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/app/spa-loading-template.html

diff --git a/frontend/app/spa-loading-template.html b/frontend/app/spa-loading-template.html
new file mode 100644
index 0000000..a379ec6
--- /dev/null
+++ b/frontend/app/spa-loading-template.html
@@ -0,0 +1,43 @@
+<!-- 
+    This component is used to show a loading spinner when the SPA is loading.
+    Source: https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md
+-->
+<div class="loader"></div>
+<style>
+.loader {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: #000;
+  border-left-color: #000;
+  border-bottom-color: #efefef;
+  border-right-color: #efefef;
+  border-radius: 50%;
+  -webkit-animation: loader 400ms linear infinite;
+  animation: loader 400ms linear infinite;
+}
+
+\@-webkit-keyframes loader {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+\@keyframes loader {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+</style>