Refactor: add loader componet

MARU-EGG · Aug 23, 2024 · 2f384a8 · 2f384a8
1 parent eacb6e4
commit 2f384a8
Show file tree

Hide file tree

Showing 2 changed files with 3 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>