Fix: added visual loading spinner and success/error toast when restoring default langflow flows

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,19 +184,24 @@ export function AgentSettingsSection() {
   };
 
   const handleRestoreRetrievalFlow = (closeDialog: () => void) => {
+    setIsRestoringFlow(true);
+
     fetch("/api/reset-flow/retrieval", { method: "POST" })
       .then((res) => {
         if (res.ok) return res.json();
         throw new Error(`HTTP ${res.status}: ${res.statusText}`);
       })
       .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={

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={

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>