feat: loading page (#649)

Author: qwerzl

.changeset/tall-donuts-decide.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Added loading page for better UX

.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"
       ]
     }
   },

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>

assets/logo.svg assets/icons/logo.svgassets/logo.svg renamed to assets/icons/logo.svg

@@ -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>
 

components/custom/Nav/icon/Icon.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>