feat: ⚡ Add HTML spinner while loading frontend

Author: CPlusPatch

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>

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>