add loading state

vercel · Dec 5, 2024 · fcf49c1 · fcf49c1
1 parent 80a640e
commit fcf49c1
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/components/message-editor.tsx b/components/message-editor.tsx
@@ -1,16 +1,16 @@
-'use client';
+"use client";
 
-import { ChatRequestOptions, Message } from 'ai';
-import { Button } from './ui/button';
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-import { Textarea } from './ui/textarea';
-import { deleteTrailingMessages } from '@/app/(chat)/actions';
-import { toast } from 'sonner';
-import { useUserMessageId } from '@/hooks/use-user-message-id';
+import { ChatRequestOptions, Message } from "ai";
+import { Button } from "./ui/button";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import { Textarea } from "./ui/textarea";
+import { deleteTrailingMessages } from "@/app/(chat)/actions";
+import { toast } from "sonner";
+import { useUserMessageId } from "@/hooks/use-user-message-id";
 
 export type MessageEditorProps = {
   message: Message;
-  setMode: Dispatch<SetStateAction<'view' | 'edit'>>;
+  setMode: Dispatch<SetStateAction<"view" | "edit">>;
   setMessages: (
     messages: Message[] | ((messages: Message[]) => Message[]),
   ) => void;
@@ -26,6 +26,7 @@ export function MessageEditor({
   reload,
 }: MessageEditorProps) {
   const { userMessageIdFromServer } = useUserMessageId();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
   const [draftContent, setDraftContent] = useState<string>(message.content);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -38,7 +39,7 @@ export function MessageEditor({
 
   const adjustHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
     }
   };
@@ -62,19 +63,22 @@ export function MessageEditor({
           variant="outline"
           className="h-fit py-2 px-3"
           onClick={() => {
-            setMode('view');
+            setMode("view");
           }}
         >
           Cancel
         </Button>
         <Button
           variant="default"
           className="h-fit py-2 px-3"
+          disabled={isSubmitting}
           onClick={async () => {
+            setIsSubmitting(true);
             const messageId = userMessageIdFromServer ?? message.id;
 
             if (!messageId) {
-              toast.error('Something went wrong, please try again!');
+              toast.error("Something went wrong, please try again!");
+              setIsSubmitting(false);
               return;
             }
 
@@ -97,11 +101,11 @@ export function MessageEditor({
               return messages;
             });
 
-            setMode('view');
+            setMode("view");
             reload();
           }}
         >
-          Send
+          {isSubmitting ? "Sending..." : "Send"}
         </Button>
       </div>
     </div>