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 &&