From c159d8037c3c79773d7e318efa60c8867d0b697e Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 10 Mar 2023 16:37:11 +0100
Subject: [PATCH] #530 - Loading message added

---
 .../components/Chatbot/Chatbot.tsx            |  4 ++-
 .../components/Chatbot/Placeholder.tsx        |  6 ++--
 src/dashboardWebView/styles.css               | 29 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/dashboardWebView/components/Chatbot/Chatbot.tsx b/src/dashboardWebView/components/Chatbot/Chatbot.tsx
index f5ec69b6..bba3e200 100644
--- a/src/dashboardWebView/components/Chatbot/Chatbot.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbot.tsx
@@ -140,7 +140,9 @@ export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.Props
               answerId={answerIds[idx]}
               sources={sources[idx]} />
           )) : (
-            <Placeholder />
+            <Placeholder>
+              {loading ? <div className='dots'>Assistent is getting ready</div> : `I'm ready, what do you want to know?`}
+            </Placeholder>
           )
         }
 
diff --git a/src/dashboardWebView/components/Chatbot/Placeholder.tsx b/src/dashboardWebView/components/Chatbot/Placeholder.tsx
index d3a38e24..460f2907 100644
--- a/src/dashboardWebView/components/Chatbot/Placeholder.tsx
+++ b/src/dashboardWebView/components/Chatbot/Placeholder.tsx
@@ -3,13 +3,15 @@ import { ChatIcon } from '../../../components/icons/ChatIcon';
 
 export interface IPlaceholderProps { }
 
-export const Placeholder: React.FunctionComponent<IPlaceholderProps> = (props: React.PropsWithChildren<IPlaceholderProps>) => {
+export const Placeholder: React.FunctionComponent<IPlaceholderProps> = ({
+  children,
+}: React.PropsWithChildren<IPlaceholderProps>) => {
   return (
     <div className='w-full h-full flex flex-col gap-2 items-center justify-center text-[var(--frontmatter-secondary-text)] opacity-80'>
       <ChatIcon className='h-16 w-16 text-[var(--vscode-sideBarTitle-foreground)]' />
 
       <div className='text-[var(--vscode-sideBarTitle-foreground)] text-2xl mt-4'>
-        Start by asking a question
+        {children}
       </div>
     </div>
   );
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index 3354941b..cf0c4eea 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -454,3 +454,32 @@
     }
   }
 }
+
+.dots {
+  &:after {
+    display: inline-block;
+    animation: ellipsis 1.25s infinite;
+    content: '.';
+    width: 1em;
+    text-align: left;
+    height: 20px;
+  }
+}
+
+@keyframes ellipsis {
+  0% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+  100% {
+    content: '';
+  }
+}