feat: add spinner to loading page

Author: yz778

src/icons/StartupSpinner.tsx

@@ -0,0 +1,24 @@
+export default function Image() {
+  return (
+    <svg
+      className="mb-4 h-12 w-12 animate-spin text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+      ></path>
+    </svg>
+  )
+}

src/main.tsx

@@ -2,17 +2,24 @@ import { initDb } from '~/core/db'
 import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom/client'
 import { KBarProvider } from 'kbar'
-import { HeroUIProvider } from "@heroui/react"
+import { HeroUIProvider } from '@heroui/react'
 import { MemoryRouter } from 'react-router-dom'
 
 import App from '~/App'
 import DaisyUiThemeProvider from '~/containers/DaisyUiThemeProvider'
 
 import '~/index.css'
+import StartupSpinner from './icons/StartupSpinner'
 
 const errorPage = (
-  <div className="flex h-screen w-screen place-content-center bg-slate-700 text-3xl text-black">
-    Waiting for app to load, hard refresh may be needed
+  <div className="flex h-screen w-screen items-center justify-center bg-base-100">
+    <div className="flex flex-col items-center">
+      <StartupSpinner />
+      <span className="text-3xl text-white">Starting LLM X</span>
+      <span className="mt-2 text-base text-gray-300">
+        Try a hard refresh if this takes too long
+      </span>
+    </div>
   </div>
 )