From cd64639faa5c2ffd3abe6296933f8db2c227d7e9 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 7 Feb 2025 00:39:44 +0800
Subject: [PATCH] Show loading icon when saving the workflow (#1740)

---
 skyvern-frontend/src/components/icons/SaveIcon.tsx        | 7 ++++++-
 .../src/routes/workflows/editor/FlowRenderer.tsx          | 1 +
 .../src/routes/workflows/editor/WorkflowHeader.tsx        | 8 +++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/skyvern-frontend/src/components/icons/SaveIcon.tsx b/skyvern-frontend/src/components/icons/SaveIcon.tsx
index 84c8eb01..25e97935 100644
--- a/skyvern-frontend/src/components/icons/SaveIcon.tsx
+++ b/skyvern-frontend/src/components/icons/SaveIcon.tsx
@@ -1,4 +1,8 @@
-function SaveIcon() {
+type Props = {
+  className?: string;
+};
+
+function SaveIcon({ className }: Props) {
   return (
     <svg
       width="24"
@@ -6,6 +10,7 @@ function SaveIcon() {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z"
diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 43e1c3db..b3fde412 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -603,6 +603,7 @@ function FlowRenderer({
             <Panel position="top-center" className="h-20">
               <WorkflowHeader
                 title={title}
+                saving={saveWorkflowMutation.isPending}
                 onTitleChange={(newTitle) => {
                   setTitle(newTitle);
                   setHasChanges(true);
diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
index 86e79989..537c3445 100644
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
@@ -25,6 +25,7 @@ type Props = {
   onParametersClick: () => void;
   onSave: () => void;
   onTitleChange: (title: string) => void;
+  saving: boolean;
 };
 
 function WorkflowHeader({
@@ -33,6 +34,7 @@ function WorkflowHeader({
   onParametersClick,
   onSave,
   onTitleChange,
+  saving,
 }: Props) {
   const { workflowPermanentId } = useParams();
   const { data: globalWorkflows } = useGlobalWorkflowsQuery();
@@ -95,7 +97,11 @@ function WorkflowHeader({
                       onSave();
                     }}
                   >
-                    <SaveIcon />
+                    {saving ? (
+                      <ReloadIcon className="size-6 animate-spin" />
+                    ) : (
+                      <SaveIcon className="size-6" />
+                    )}
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>Save</TooltipContent>