From 17441bfd4716fd6c6d31d51e2d032dac49497175 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 9 Dec 2024 10:19:35 +0100
Subject: [PATCH] feat: :zap: Add HTML spinner while loading frontend

---
 app/spa-loading-template.html | 47 +++++++++++++++++++++++++++++++++++
 pages/loader.vue              | 12 +++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 app/spa-loading-template.html
 create mode 100644 pages/loader.vue

diff --git a/app/spa-loading-template.html b/app/spa-loading-template.html
new file mode 100644
index 0000000..d2fbff5
--- /dev/null
+++ b/app/spa-loading-template.html
@@ -0,0 +1,47 @@
+<div class="loader-container">
+    <div class="loader-spinner-container">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round" class="lucide lucide-loader-icon loader-spinner">
+            <path d="M12 2v4"></path>
+            <path d="m16.2 7.8 2.9-2.9"></path>
+            <path d="M18 12h4"></path>
+            <path d="m16.2 16.2 2.9 2.9"></path>
+            <path d="M12 18v4"></path>
+            <path d="m4.9 19.1 2.9-2.9"></path>
+            <path d="M2 12h4"></path>
+            <path d="m4.9 4.9 2.9 2.9"></path>
+        </svg>
+    </div>
+</div>
+
+<style>
+    .loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100dvh;
+        width: 100dvw;
+        padding: 1.5rem;
+    }
+
+    .loader-spinner-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loader-spinner {
+        animation: spin 1s linear infinite;
+        width: 2rem;
+        height: 2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/loader.vue b/pages/loader.vue
new file mode 100644
index 0000000..942d15d
--- /dev/null
+++ b/pages/loader.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="p-6 flex items-center justify-center h-dvh w-dvw">
+        <div class="flex flex-col items-center justify-center gap-4">
+            <Loader class="animate-spin size-8" />
+            <!-- <p class="text-xl font-semibold tracking-tight">Versia Frontend</p> -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Loader } from "lucide-vue-next";
+</script>
\ No newline at end of file