From 4cd506d340ffa962ce9fbadb8f12c73e26fc9fa7 Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Tue, 4 Jun 2024 16:44:55 +0300
Subject: [PATCH] Improve loading state in new task ui (#414)

---
 .../src/routes/tasks/detail/TaskActions.tsx   | 12 ++++-
 .../src/routes/tasks/detail/TaskDetails.tsx   | 44 ++++++++++---------
 .../routes/tasks/detail/TaskParameters.tsx    |  7 ++-
 .../src/routes/tasks/detail/TaskRecording.tsx |  9 +++-
 4 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
index 5aebbb92..b6341878 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
@@ -4,6 +4,7 @@ import { ActionScreenshot } from "./ActionScreenshot";
 import { InputReasoningCard } from "./InputReasoningCard";
 import { ScrollableActionList } from "./ScrollableActionList";
 import { useActions } from "./useActions";
+import { Skeleton } from "@/components/ui/skeleton";
 
 function TaskActions() {
   const { taskId } = useParams();
@@ -14,7 +15,16 @@ function TaskActions() {
   const activeAction = data?.[selectedActionIndex];
 
   if (isFetching || !data) {
-    return <div>Loading...</div>;
+    return (
+      <div className="flex gap-2">
+        <div className="h-[40rem] w-3/4">
+          <Skeleton className="h-full" />
+        </div>
+        <div className="h-[40rem] w-1/4">
+          <Skeleton className="h-full" />
+        </div>
+      </div>
+    );
   }
 
   if (!activeAction) {
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index 18e404d5..035ca830 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -41,40 +41,44 @@ function TaskDetails() {
     return <div>Error: {taskError?.message}</div>;
   }
 
+  const informationContentLabel =
+    task?.status === Status.Completed
+      ? "Extracted Information"
+      : task?.status === Status.Failed || task?.status === Status.Terminated
+        ? "Failure Reason"
+        : "";
+
+  const informationContent =
+    task?.status === Status.Completed
+      ? JSON.stringify(task.extracted_information, null, 2)
+      : task?.status === Status.Failed || task?.status === Status.Terminated
+        ? JSON.stringify(task?.failure_reason)
+        : "";
+
   return (
     <div className="flex flex-col gap-8">
       <div className="flex items-center gap-4">
         <Input value={taskId} className="w-52" readOnly />
         {taskIsFetching ? (
-          <Skeleton className="w-32 h-8" />
+          <Skeleton className="w-28 h-8" />
         ) : task ? (
           <StatusBadge status={task?.status} />
         ) : null}
       </div>
       <div>
-        {task?.status === Status.Completed ? (
+        {taskIsFetching ? (
+          <div className="flex items-center gap-2">
+            <Skeleton className="w-32 h-32" />
+            <Skeleton className="w-full h-32" />
+          </div>
+        ) : (
           <div className="flex items-center">
             <Label className="w-32 shrink-0 text-lg">
-              Extracted Information
+              {informationContentLabel}
             </Label>
-            <Textarea
-              rows={5}
-              value={JSON.stringify(task.extracted_information, null, 2)}
-              readOnly
-            />
+            <Textarea rows={5} value={informationContent} readOnly />
           </div>
-        ) : null}
-        {task?.status === Status.Failed ||
-        task?.status === Status.Terminated ? (
-          <div className="flex items-center">
-            <Label>Failure Reason</Label>
-            <Textarea
-              rows={5}
-              value={JSON.stringify(task.failure_reason)}
-              readOnly
-            />
-          </div>
-        ) : null}
+        )}
       </div>
       <div className="flex justify-center items-center">
         <div className="inline-flex border rounded bg-muted p-1">
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx
index 284b444c..f6e5948f 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx
@@ -8,6 +8,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { basicTimeFormat } from "@/util/timeFormat";
@@ -31,7 +32,11 @@ function TaskParameters() {
   });
 
   if (taskIsFetching) {
-    return <div>Loading parameters...</div>;
+    return (
+      <div className="h-[40rem]">
+        <Skeleton className="h-full" />
+      </div>
+    );
   }
 
   if (taskIsError || !task) {
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
index a5773567..62689e1f 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
@@ -4,6 +4,7 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { getRecordingURL } from "./artifactUtils";
 import { useParams } from "react-router-dom";
+import { Skeleton } from "@/components/ui/skeleton";
 
 function TaskRecording() {
   const { taskId } = useParams();
@@ -22,7 +23,13 @@ function TaskRecording() {
   });
 
   if (taskIsFetching) {
-    return <div>Loading recording...</div>;
+    return (
+      <div className="flex mx-auto">
+        <div className="w-[800px] h-[450px]">
+          <Skeleton className="h-full" />
+        </div>
+      </div>
+    );
   }
 
   if (taskIsError || !task) {