#530 - Loading message added

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>
           )
         }
 

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>
   );

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: '';
+  }
+}