From b4ff929c22ff21601581a76cedfe4fd4f62cc729 Mon Sep 17 00:00:00 2001
From: Tom Tang <me@qwerzl.me>
Date: Fri, 6 Dec 2024 09:38:27 +0800
Subject: [PATCH] feat: loading page (#649)

---
 .changeset/tall-donuts-decide.md    |  5 +++++
 .devcontainer/devcontainer.json     |  5 ++---
 app.vue                             | 17 ++++++++++++++++-
 assets/{ => icons}/logo.svg         |  0
 components/custom/Nav/icon/Icon.vue |  4 +---
 layouts/sign-in-or-out.vue          |  3 +--
 6 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/tall-donuts-decide.md
 rename assets/{ => icons}/logo.svg (100%)

diff --git a/.changeset/tall-donuts-decide.md b/.changeset/tall-donuts-decide.md
new file mode 100644
index 00000000..304ce1a3
--- /dev/null
+++ b/.changeset/tall-donuts-decide.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Added loading page for better UX
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index ba312e03..20bdd53f 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -14,14 +14,13 @@
   "customizations": {
     "vscode": {
       "extensions": [
-        // Required extensions
         "Vue.volar",
         "bradlc.vscode-tailwindcss",
         "dbaeumer.vscode-eslint",
         "Nuxtr.nuxtr-vscode",
         "Prisma.prisma",
-        // Do not install Prettier. It will conflict with eslint.
-        "-esbenp.prettier-vscode"
+        "-esbenp.prettier-vscode",
+        "csstools.postcss"
       ]
     }
   },
diff --git a/app.vue b/app.vue
index 42d3a5f9..efea588e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ConfigProvider } from 'radix-vue'
+import { ClerkLoaded, ClerkLoading } from 'vue-clerk'
+import { IndefiniteProgressBar } from '~/components/ui/indefinite-progress-bar'
 import '@unocss/reset/tailwind-compat.css'
 
 const useIdFunction = () => useId()
@@ -16,7 +18,20 @@ useHead({
   <ConfigProvider :use-id="useIdFunction">
     <NuxtLoadingIndicator />
     <VitePwaManifest />
-    <NuxtLayout>
+    <ClerkLoading>
+      <div class="absolute z-100 h-screen w-screen bg-background">
+        <div class="h-full w-full flex flex-col items-center justify-center space-y-6">
+          <div class="flex justify-center space-x-1">
+            <SvgoLogo class="pt-1 text-7xl hover:animate-spin" />
+            <div class="mt-1 text-6xl tracking-tight">
+              enspire
+            </div>
+          </div>
+          <Icon name="svg-spinners:3-dots-fade" size="2em" />
+        </div>
+      </div>
+    </ClerkLoading>
+    <NuxtLayout class="z-10">
       <NuxtPage />
     </NuxtLayout>
   </ConfigProvider>
diff --git a/assets/logo.svg b/assets/icons/logo.svg
similarity index 100%
rename from assets/logo.svg
rename to assets/icons/logo.svg
diff --git a/components/custom/Nav/icon/Icon.vue b/components/custom/Nav/icon/Icon.vue
index 24cf0c15..6e8b5eea 100644
--- a/components/custom/Nav/icon/Icon.vue
+++ b/components/custom/Nav/icon/Icon.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import IconLogo from '@/assets/logo.svg'
 </script>
 
 <template>
-  <!-- TODO: Just a placeholder lol nobody would want a skull to be their icon -->
   <NuxtLink class="flex items-center" to="/">
-    <IconLogo class="text-3xl pt-1" />
+    <SvgoLogo class="pt-1 text-3xl" />
   </NuxtLink>
 </template>
 
diff --git a/layouts/sign-in-or-out.vue b/layouts/sign-in-or-out.vue
index 3b7217d0..9e2c1080 100644
--- a/layouts/sign-in-or-out.vue
+++ b/layouts/sign-in-or-out.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import IconLogo from '@/assets/logo.svg'
 import { useFavicon, usePreferredDark } from '@vueuse/core'
 
 const isDark = usePreferredDark()
@@ -16,7 +15,7 @@ useFavicon(favicon)
   >
     <div class="relative hidden h-screen flex-col bg-muted text-white dark:border-r p-10 lg:flex bg-zinc-900">
       <div class="relative z-20 flex items-center text-lg font-medium">
-        <IconLogo class="text-3xl mt-1.5 hover:animate-spin" />
+        <SvgoLogo class="text-3xl mt-1.5 hover:animate-spin" />
         <div class="ml-0.5 text-2xl tracking-tight">
           enspire
         </div>