loading dots animation

src/lib/commandCenter/panels/ai.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code, SvgIcon } from '$lib/components';
+    import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
@@ -126,7 +126,7 @@
                 </div>
                 <div class="answer">
                     {#if $isLoading && !$completion}
-                        <p>...</p>
+                        <LoadingDots />
                     {:else}
                         {#each answer as part}
                             {#if part.type === 'text'}

src/lib/components/index.ts

@@ -56,3 +56,4 @@ export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';
 export { default as FloatingActionBar } from './floatingActionBar.svelte';
+export { default as LoadingDots } from './loadingDots.svelte';

src/lib/components/loadingDots.svelte

@@ -0,0 +1,56 @@
+<!-- Loading dots -->
+<script>
+    let className = '';
+    export { className as class };
+</script>
+
+<div class="loading-dots {className}">
+    <div class="dot" />
+    <div class="dot" />
+    <div class="dot" />
+</div>
+
+<style>
+    .loading-dots {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 0.25rem;
+        padding-inline: 0.5rem;
+    }
+
+    .dot {
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 50%;
+        background-color: hsl(var(--p-body-text-color));
+        animation: loading-dots 1s infinite ease-in-out;
+    }
+
+    .dot:nth-child(1) {
+        animation-delay: 0.1s;
+    }
+
+    .dot:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .dot:nth-child(3) {
+        animation-delay: 0.3s;
+    }
+
+    @keyframes loading-dots {
+        0% {
+            transform: translateY(0.25rem);
+        }
+        25% {
+            transform: translateY(0rem);
+        }
+        50%,
+        100% {
+            transform: translateY(0.25rem);
+        }
+    }
+</style>