feat: use ui-ball loading

webapp/.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import "@/app/globals.css";
 
 const preview: Preview = {
   parameters: {

webapp/package.json

@@ -46,6 +46,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "jsdom": "^24.1.0",
+    "ldrs": "^1.0.2",
     "lexical": "^0.16.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.408.0",

webapp/src/components/splashscreen.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Splashscreen from './splashscreen';
+
+
+const meta = {
+  title: 'Components/Splashscreen',
+  component: Splashscreen,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light',
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<typeof Splashscreen>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

webapp/src/components/splashscreen.tsx

@@ -1,10 +1,13 @@
-import { ThreeDotsLoading } from '@/components/ui/loading';
+import { HelixLoading } from '@/components/ui/loading';
 
 export default function Splashscreen() {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 fixed inset-0 backdrop-filter backdrop-blur-sm z-50">
-      <p>Loading</p>
-      <ThreeDotsLoading />
+    <div className="flex flex-col items-center justify-center gap-6 fixed inset-0 backdrop-filter backdrop-blur-sm z-50">
+      <div className='flex flex-col'>
+        <h1 className='text-3xl font-medium tracking-tighter'>Launching Assistant</h1>
+        <p>Please wait</p>
+      </div>
+      <HelixLoading />
     </div>
   );
 

webapp/src/components/ui/loading.tsx

@@ -1,6 +1,11 @@
 import { Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
+import { helix } from 'ldrs';
+
+helix.register();
+
+
 
 interface Props {
   className?: string
@@ -20,6 +25,14 @@ function Dot({ className }: Props) {
   return <span className={cn('bg-gray-900 dark:bg-gray-50 h-1 w-1 rounded-full inline-block', className)} />;
 }
 
+export function HelixLoading() {
+  return <l-helix
+    size="45"
+    speed="2.5"
+    color="black"
+  ></l-helix>;
+}
+
 export function SpinnerLoading ({ className }: Props) {
   return (
     <Loader2 className={cn('animate-spin', className)} />

webapp/tailwind.config.ts

@@ -8,6 +8,7 @@ const config = {
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
+
   ],
   prefix: '',
   theme: {