From 2b589344d5b2cc44b7012e06455dc390ca5be39e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:01:22 +0100
Subject: [PATCH] loading dots animation

---
 src/lib/commandCenter/panels/ai.svelte |  4 +-
 src/lib/components/index.ts            |  1 +
 src/lib/components/loadingDots.svelte  | 56 ++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/loadingDots.svelte

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index bed645ccc..6cd1897cf 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/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'}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 581b39146..cacb81141 100644
--- a/src/lib/components/index.ts
+++ b/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';
diff --git a/src/lib/components/loadingDots.svelte b/src/lib/components/loadingDots.svelte
new file mode 100644
index 000000000..71df2f128
--- /dev/null
+++ b/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>