From 2ba92998967fb906112a82ca1f33e2dca809f901 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Thu, 23 Nov 2023 21:48:54 -0600
Subject: [PATCH] feat: add loading indicator (#203)
---
.../components/ui/shadcn/chat/chat-messages.tsx | 13 +++++++++++++
templates/types/streaming/nextjs/package.json | 2 +-
2 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/templates/components/ui/shadcn/chat/chat-messages.tsx b/templates/components/ui/shadcn/chat/chat-messages.tsx
index dd0a442b..ee40cfd6 100644
--- a/templates/components/ui/shadcn/chat/chat-messages.tsx
+++ b/templates/components/ui/shadcn/chat/chat-messages.tsx
@@ -1,4 +1,5 @@
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
diff --git a/templates/types/streaming/nextjs/package.json b/templates/types/streaming/nextjs/package.json
index fc5e483e..fbac4395 100644
--- a/templates/types/streaming/nextjs/package.json
+++ b/templates/types/streaming/nextjs/package.json
@@ -26,4 +26,4 @@
"tailwindcss": "^3.3",
"typescript": "^5"
}
-}
\ No newline at end of file
+}
--
GitLab