Merge pull request MARU-EGG#42 from MARU-EGG/feat/loader_2

Feat: loader component 재오픈
sangmaaaaan · Aug 23, 2024 · 68eef11 · 68eef11
2 parents 041f5e6 + 79cd9e9
commit 68eef11
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts
@@ -32,7 +32,7 @@ const useChatForm = () => {
       e.preventDefault();
       try {
         useChatStore.getState().addMessage({ content, role: 'user' });
-        useChatStore.getState().addMessage({ content: '답변을 생성중입니다...', role: 'system' });
+        useChatStore.getState().addMessage({ content: 'loading', role: 'system' });
         useChatStore.getState().setLoading(true);
         setContent('');
         setAutoOpen(false);

diff --git a/src/ui/components/atom/chat-card/chat-card.tsx b/src/ui/components/atom/chat-card/chat-card.tsx
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { cn } from '../../../../utils/style';
 import maru from '../../../../assets/maru-egg.png';
+import Loader from '../loader/loader';
 interface ChatCardProps {
   content: string;
   role: 'user' | 'system';
@@ -24,7 +25,7 @@ const ChatCard = ({ content, role }: ChatCardProps) => {
           })}
         >
           <div className="font-pretendard text-sm font-normal">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+            {content === 'loading' ? <Loader /> : <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>}
           </div>
         </div>
       </div>

diff --git a/src/ui/components/atom/loader/loader.tsx b/src/ui/components/atom/loader/loader.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Loader: React.FC = () => {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex space-x-2">
+        <div className="h-2 w-2 animate-pulse rounded-full bg-primary-blue" style={{ animationDelay: '-0.3s' }}></div>
+        <div className="h-2 w-2 animate-pulse rounded-full bg-primary-blue" style={{ animationDelay: '0.1s' }}></div>
+        <div className="h-2 w-2 animate-pulse rounded-full bg-primary-blue" style={{ animationDelay: '0.5s' }}></div>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;