fix weird loading state in actions (#439)

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;
               }}

skyvern-frontend/src/routes/tasks/detail/useActions.tsx

@@ -22,11 +22,12 @@ function getActionInput(action: ActionApiResponse) {
   return input;
 }
 
-function useActions(
+function useActions(taskId: string): {
-  taskId: string,
+  data?: Array<Action>;
-): ReturnType<typeof useQuery<Array<Action | null>>> {
+  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,15 +38,21 @@ function useActions(
   const taskIsRunningOrQueued =
     task?.status === Status.Running || task?.status === Status.Queued;
 
-  const useQueryReturn = useQuery<Array<Action | null>>({
+  const stepsQuery = useQuery<Array<StepApiResponse>>({
-    queryKey: ["task", taskId, "actions"],
+    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>;
+        .then((response) => response.data);
+    },
+    enabled: !!task,
+    staleTime: taskIsRunningOrQueued ? 30 : Infinity,
+    refetchOnWindowFocus: taskIsRunningOrQueued,
+  });
 
-      const actions = steps.map((step) => {
+  const actions = stepsQuery.data
+    ?.map((step) => {
       const actionsAndResults = step.output.actions_and_results;
 
       const actions = actionsAndResults.map((actionAndResult, index) => {
@@ -61,16 +68,13 @@ function useActions(
         return action;
       });
       return actions;
-      });
+    })
+    .flat();
 
-      return actions.flat();
+  return {
-    },
+    data: actions,
-    enabled: !!task,
+    isFetching: stepsQuery.isFetching || taskIsFetching,
-    staleTime: taskIsRunningOrQueued ? 30 : Infinity,
+  };
-    refetchOnWindowFocus: taskIsRunningOrQueued,
-  });
-
-  return useQueryReturn;
 }
 
 export { useActions };