diff --git a/src/components/DotPulse/index.tsx b/src/components/DotPulse/index.tsx
new file mode 100644
index 000000000..70f0b44c7
--- /dev/null
+++ b/src/components/DotPulse/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './styles.module.scss';
+
+const DotPulse = () => {
+ return (
+
+ );
+};
+
+export default DotPulse;
diff --git a/src/components/DotPulse/styles.module.scss b/src/components/DotPulse/styles.module.scss
new file mode 100644
index 000000000..1e771d31e
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/modules/blockchains/Buy/studio/Chatbox/MessageStream/index.tsx b/src/modules/blockchains/Buy/studio/Chatbox/MessageStream/index.tsx
index 4392e3d69..5f717cfc3 100644
--- a/src/modules/blockchains/Buy/studio/Chatbox/MessageStream/index.tsx
+++ b/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 ? (
- ...
+
) : null}
{generationStatus.isGeneratedJson &&