feat: add loading indicator (#203)

templates/components/ui/shadcn/chat/chat-messages.tsx

 import { useEffect, useRef } from "react";
+import { Loader2 } from "lucide-react";
 
 import ChatActions from "./chat-actions";
 import ChatMessage from "./chat-message";
@@ -24,6 +25,11 @@ export default function ChatMessages(
     props.reload && !props.isLoading && isLastMessageFromAssistant;
   const showStop = props.stop && props.isLoading;
 
+  // `isPending` indicate
+  // that stream response is not yet received from the server,
+  // so we show a loading indicator to give a better UX.
+  const isPending = props.isLoading && !isLastMessageFromAssistant;
+
   useEffect(() => {
     scrollToBottom();
   }, [messageLength, lastMessage]);
@@ -37,6 +43,13 @@ export default function ChatMessages(
         {props.messages.map((m) => (
           <ChatMessage key={m.id} {...m} />
         ))}
+        {isPending && (
+          <div
+            className='flex justify-center items-center pt-10'
+          >
+            <Loader2 className="h-4 w-4 animate-spin"/>
+          </div>
+        )}
       </div>
       <div className="flex justify-end py-4">
         <ChatActions

templates/types/streaming/nextjs/package.json

@@ -26,4 +26,4 @@
     "tailwindcss": "^3.3",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file