From 50ebaa80a70ae24f438f4e2842c1346841b1a809 Mon Sep 17 00:00:00 2001
From: vchen7629 <chenvincent7629@gmail.com>
Date: Mon, 8 Jun 2026 09:54:48 -0700
Subject: [PATCH 1/2] fix: add loading state and toast feedback for restore
 flow actions

---
 .../settings/_components/agent-settings-section.tsx    |  9 ++++++++-
 .../settings/_components/ingest-settings-section.tsx   | 10 +++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/app/settings/_components/agent-settings-section.tsx b/frontend/app/settings/_components/agent-settings-section.tsx
index 59fa14f4f..2f187f4d3 100644
--- a/frontend/app/settings/_components/agent-settings-section.tsx
+++ b/frontend/app/settings/_components/agent-settings-section.tsx
@@ -43,6 +43,7 @@ export function AgentSettingsSection() {
   const pathname = usePathname();
 
   const focusLlmModel = searchParams.get("focusLlmModel") === "true";
+  const [isRestoringFlow, setIsRestoringFlow] = useState<boolean>(false);
   const [openLlmSelector, setOpenLlmSelector] = useState(false);
   const [systemPrompt, setSystemPrompt] = useState<string>("");
 
@@ -183,6 +184,8 @@ export function AgentSettingsSection() {
   };
 
   const handleRestoreRetrievalFlow = (closeDialog: () => void) => {
+    setIsRestoringFlow(true);
+
     fetch("/api/reset-flow/retrieval", { method: "POST" })
       .then((res) => {
         if (res.ok) return res.json();
@@ -190,12 +193,15 @@ export function AgentSettingsSection() {
       })
       .then(() => {
         setSystemPrompt(DEFAULT_AGENT_SETTINGS.system_prompt);
+        toast.success("Default agent flow settings restored successfully");
         closeDialog();
       })
       .catch((err) => {
         console.error("Error restoring retrieval flow:", err);
+        toast.error("Failed to restore default agent flow settings");
         closeDialog();
-      });
+      })
+      .finally(() => setIsRestoringFlow(false));
   };
 
   return (
@@ -223,6 +229,7 @@ export function AgentSettingsSection() {
                 confirmText="Restore"
                 variant="destructive"
                 onConfirm={handleRestoreRetrievalFlow}
+                isLoading={isRestoringFlow}
               />
               <ConfirmationDialog
                 trigger={
diff --git a/frontend/app/settings/_components/ingest-settings-section.tsx b/frontend/app/settings/_components/ingest-settings-section.tsx
index 8f5f336a5..371a2ac3d 100644
--- a/frontend/app/settings/_components/ingest-settings-section.tsx
+++ b/frontend/app/settings/_components/ingest-settings-section.tsx
@@ -37,6 +37,8 @@ export function IngestSettingsSection() {
   const isCloudBrand = useIsCloudBrand();
   const { isAuthenticated, isNoAuthMode, isIbmAuthMode, runMode } = useAuth();
 
+  const [isRestoringFlow, setIsRestoringFlow] = useState<boolean>(false);
+
   const [chunkSize, setChunkSize] = useState<number>(1024);
   const [chunkOverlap, setChunkOverlap] = useState<number>(50);
   const [chunkValidationError, setChunkValidationError] = useState<
@@ -228,6 +230,8 @@ export function IngestSettingsSection() {
   };
 
   const handleRestoreIngestFlow = (closeDialog: () => void) => {
+    setIsRestoringFlow(true);
+
     fetch("/api/reset-flow/ingest", { method: "POST" })
       .then((res) => {
         if (res.ok) return res.json();
@@ -241,12 +245,15 @@ export function IngestSettingsSection() {
         setPictureDescriptions(DEFAULT_KNOWLEDGE_SETTINGS.picture_descriptions);
         setDisableIngestWithLangflow(false);
         setChunkValidationError(null);
+        toast.success("Default ingest flow settings restored successfully");
         closeDialog();
       })
       .catch((err) => {
         console.error("Error restoring ingest flow:", err);
+        toast.error("Failed to restore default ingest flow settings");
         closeDialog();
-      });
+      })
+      .finally(() => setIsRestoringFlow(false));
   };
 
   return (
@@ -274,6 +281,7 @@ export function IngestSettingsSection() {
                 confirmText="Restore"
                 variant="destructive"
                 onConfirm={handleRestoreIngestFlow}
+                isLoading={isRestoringFlow}
               />
               <ConfirmationDialog
                 trigger={

From e7bad0d4eef6b9800c912fd4daad5870246e9994 Mon Sep 17 00:00:00 2001
From: vchen7629 <chenvincent7629@gmail.com>
Date: Mon, 8 Jun 2026 09:56:21 -0700
Subject: [PATCH 2/2] feat: added isLoading prop and an animated spinner to
 ConfirmationDialog

---
 frontend/components/confirmation-dialog.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/components/confirmation-dialog.tsx b/frontend/components/confirmation-dialog.tsx
index 1eb9f569f..5d4f92e2e 100644
--- a/frontend/components/confirmation-dialog.tsx
+++ b/frontend/components/confirmation-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Loader2 } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
@@ -22,6 +23,7 @@ interface ConfirmationDialogProps {
   onCancel?: () => void;
   variant?: "default" | "destructive" | "warning";
   confirmIcon?: ReactNode | null;
+  isLoading?: boolean;
 }
 
 export function ConfirmationDialog({
@@ -34,6 +36,7 @@ export function ConfirmationDialog({
   onCancel,
   variant = "default",
   confirmIcon = null,
+  isLoading = false,
 }: ConfirmationDialogProps) {
   const [open, setOpen] = useState(false);
 
@@ -61,7 +64,13 @@ export function ConfirmationDialog({
           <Button variant="ghost" onClick={handleCancel} size="sm">
             {cancelText}
           </Button>
-          <Button variant={variant} onClick={handleConfirm} size="sm">
+          <Button
+            variant={variant}
+            onClick={handleConfirm}
+            size="sm"
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
             {confirmText}
             {confirmIcon}
           </Button>