From 579aa274cda84854352f414a54410a194cef18c3 Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Thu, 6 Jun 2024 23:16:35 +0300
Subject: [PATCH] fix weird loading state in actions (#439)

---
 .../tasks/detail/ScrollableActionList.tsx     |  1 +
 .../src/routes/tasks/detail/useActions.tsx    | 62 ++++++++++---------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
index dcb44b7e..5cc959d0 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
@@ -70,6 +70,7 @@ function ScrollableActionList({
           const selected = activeIndex === index;
           return (
             <div
+              key={index}
               ref={(element) => {
                 refs.current[index] = element;
               }}
diff --git a/skyvern-frontend/src/routes/tasks/detail/useActions.tsx b/skyvern-frontend/src/routes/tasks/detail/useActions.tsx
index 08b4814c..5b51358a 100644
--- a/skyvern-frontend/src/routes/tasks/detail/useActions.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/useActions.tsx
@@ -22,11 +22,12 @@ function getActionInput(action: ActionApiResponse) {
   return input;
 }
 
-function useActions(
-  taskId: string,
-): ReturnType<typeof useQuery<Array<Action | null>>> {
+function useActions(taskId: string): {
+  data?: Array<Action>;
+  isFetching: boolean;
+} {
   const credentialGetter = useCredentialGetter();
-  const { data: task } = useQuery<TaskApiResponse>({
+  const { data: task, isFetching: taskIsFetching } = useQuery<TaskApiResponse>({
     queryKey: ["task", taskId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
@@ -37,40 +38,43 @@ function useActions(
   const taskIsRunningOrQueued =
     task?.status === Status.Running || task?.status === Status.Queued;
 
-  const useQueryReturn = useQuery<Array<Action | null>>({
-    queryKey: ["task", taskId, "actions"],
+  const stepsQuery = useQuery<Array<StepApiResponse>>({
+    queryKey: ["task", taskId, "steps"],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const steps = (await client
+      return client
         .get(`/tasks/${taskId}/steps`)
-        .then((response) => response.data)) as Array<StepApiResponse>;
-
-      const actions = steps.map((step) => {
-        const actionsAndResults = step.output.actions_and_results;
-
-        const actions = actionsAndResults.map((actionAndResult, index) => {
-          const action: Action = {
-            reasoning: actionAndResult[0].reasoning,
-            confidence: actionAndResult[0].confidence_float,
-            input: getActionInput(actionAndResult[0]),
-            type: actionAndResult[0].action_type,
-            success: actionAndResult[1][0].success,
-            stepId: step.step_id,
-            index,
-          };
-          return action;
-        });
-        return actions;
-      });
-
-      return actions.flat();
+        .then((response) => response.data);
     },
     enabled: !!task,
     staleTime: taskIsRunningOrQueued ? 30 : Infinity,
     refetchOnWindowFocus: taskIsRunningOrQueued,
   });
 
-  return useQueryReturn;
+  const actions = stepsQuery.data
+    ?.map((step) => {
+      const actionsAndResults = step.output.actions_and_results;
+
+      const actions = actionsAndResults.map((actionAndResult, index) => {
+        const action: Action = {
+          reasoning: actionAndResult[0].reasoning,
+          confidence: actionAndResult[0].confidence_float,
+          input: getActionInput(actionAndResult[0]),
+          type: actionAndResult[0].action_type,
+          success: actionAndResult[1][0].success,
+          stepId: step.step_id,
+          index,
+        };
+        return action;
+      });
+      return actions;
+    })
+    .flat();
+
+  return {
+    data: actions,
+    isFetching: stepsQuery.isFetching || taskIsFetching,
+  };
 }
 
 export { useActions };