dot animation

src/components/DotPulse/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './styles.module.scss';
+
+const DotPulse = () => {
+  return (
+    <div className={styles.dotPulse}>
+      <div className={styles.dotPulse__dot}>.</div>
+      <div className={styles.dotPulse__dot}>.</div>
+      <div className={styles.dotPulse__dot}>.</div>
+    </div>
+  );
+};
+
+export default DotPulse;

src/components/DotPulse/styles.module.scss

@@ -0,0 +1,28 @@
+.dotPulse {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  // justify-content: center;
+
+  &__dot:nth-child(1) {
+    animation: dotPulse 1s infinite linear 0s;
+  }
+
+  &__dot:nth-child(2) {
+    animation: dotPulse 1s infinite linear 0.2s;
+  }
+
+  &__dot:nth-child(3) {
+    animation: dotPulse 1s infinite linear 0.4s;
+  }
+}
+
+@keyframes dotPulse {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/modules/blockchains/Buy/studio/Chatbox/MessageStream/index.tsx

@@ -11,6 +11,7 @@ import useChatBoxState, { ChatBoxStatus } from '../chatbox-store';
 import useDappsStore from '../../../stores/useDappStore';
 import useNodeHelper from '../../../hooks/useNodeHelper';
 import useTemplate from '../../../hooks/useTemplate';
+import DotPulse from '@/components/DotPulse';
 
 function MessageStream({ message }: { message: string }) {
   const { categories } = useModelCategoriesStore();
@@ -124,7 +125,7 @@ function MessageStream({ message }: { message: string }) {
 
       {generationStatus.isGeneratingJson &&
       !generationStatus.isGeneratedJson ? (
-        <div>...</div>
+        <DotPulse />
       ) : null}
 
       {generationStatus.isGeneratedJson &&