debugger: show animated button and pulse code editor when we think co… (#3618)

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -40,6 +40,7 @@ type Props = {
   cacheKeyValue: string | null;
   cacheKeyValues: CacheKeyValuesResponse | undefined;
   cacheKeyValuesPanelOpen: boolean;
+  isGeneratingCode?: boolean;
   parametersPanelOpen: boolean;
   saving: boolean;
   showAllCode: boolean;
@@ -59,6 +60,7 @@ function WorkflowHeader({
   cacheKeyValue,
   cacheKeyValues,
   cacheKeyValuesPanelOpen,
+  isGeneratingCode,
   parametersPanelOpen,
   saving,
   showAllCode,
@@ -132,7 +134,9 @@ function WorkflowHeader({
         />
       </div>
       <div className="flex h-full items-center justify-end gap-4">
-        {user && (cacheKeyValues?.total_count ?? 0) > 0 && (
+        {user &&
+          !isGeneratingCode &&
+          (cacheKeyValues?.total_count ?? 0) > 0 && (
             <>
               {debugStore.isDebugMode && (
                 <Button
@@ -203,6 +207,16 @@ function WorkflowHeader({
               </div>
             </>
           )}
+        {isGeneratingCode && (
+          <Button
+            className="size-10 min-w-[6rem]"
+            variant={!showAllCode ? "tertiary" : "default"}
+            onClick={handleShowAllCode}
+          >
+            <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+            Code
+          </Button>
+        )}
         {isGlobalWorkflow ? (
           <Button
             size="lg"

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -157,7 +157,7 @@ function Workspace({
   const saveWorkflow = useWorkflowSave();
 
   const { data: workflowRun } = useWorkflowRunQuery();
-  const isFinalized = workflowRun ? statusIsFinalized(workflowRun) : null;
+  const isFinalized = workflowRun ? statusIsFinalized(workflowRun) : false;
   const interactor = workflowRun && isFinalized === false ? "agent" : "human";
 
   const [openCycleBrowserDialogue, setOpenCycleBrowserDialogue] =
@@ -231,13 +231,27 @@ function Workspace({
     }
   }, [cacheKeyValue, searchParams, setSearchParams]);
 
-  const { data: blockScripts } = useBlockScriptsQuery({
+  const { data: blockScriptsPublished } = useBlockScriptsQuery({
     cacheKey,
     cacheKeyValue,
     workflowPermanentId,
     status: "published",
   });
 
+  const publishedLabelCount = Object.keys(blockScriptsPublished ?? {}).length;
+
+  const isGeneratingCode =
+    publishedLabelCount === 0 && !isFinalized && Boolean(workflowRun);
+
+  const { data: blockScriptsPending } = useBlockScriptsQuery({
+    cacheKey,
+    cacheKeyValue,
+    workflowPermanentId,
+    pollIntervalMs: isGeneratingCode ? 3000 : undefined,
+    status: "pending",
+    workflowRunId: workflowRun?.workflow_run_id,
+  });
+
   const { data: cacheKeyValues, isLoading: cacheKeyValuesLoading } =
     useCacheKeyValuesQuery({
       cacheKey,
@@ -375,9 +389,9 @@ function Workspace({
   }, []);
 
   useEffect(() => {
-    blockScriptStore.setScripts(blockScripts ?? {});
+    blockScriptStore.setScripts(blockScriptsPublished ?? {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [blockScripts]);
+  }, [blockScriptsPublished]);
 
   const afterCycleBrowser = () => {
     setOpenCycleBrowserDialogue(false);
@@ -657,7 +671,8 @@ function Workspace({
   }
 
   const orderedBlockLabels = getOrderedBlockLabels(workflow);
-  const code = getCode(orderedBlockLabels, blockScripts).join("");
+  const code = getCode(orderedBlockLabels, blockScriptsPublished).join("");
+  const codePending = getCode(orderedBlockLabels, blockScriptsPending).join("");
 
   const handleCompareVersions = (
     version1: WorkflowVersion,
@@ -852,6 +867,7 @@ function Workspace({
         <WorkflowHeader
           cacheKeyValue={cacheKeyValue}
           cacheKeyValues={cacheKeyValues}
+          isGeneratingCode={isGeneratingCode}
           saving={workflowChangesStore.saveIsPending}
           cacheKeyValuesPanelOpen={
             workflowPanelState.active &&
@@ -1158,9 +1174,11 @@ function Workspace({
                       <CopyText text={code} />
                     </div>
                     <CodeEditor
-                      className="w-full overflow-y-scroll"
+                      className={cn("w-full overflow-y-scroll", {
+                        "animate-pulse": isGeneratingCode,
+                      })}
                       language="python"
-                      value={code}
+                      value={isGeneratingCode ? codePending : code}
                       lineWrap={false}
                       readOnly
                       fontSize={10}