Merge branch 'dev' into abhi-9708/add-better-skeleton-on-agent-run-page

autogpt_platform/frontend/src/app/library/agents/[id]/loading.tsx

@@ -1,20 +1,40 @@
-import AgentFlowListSkeleton from "@/components/monitor/skeletons/AgentFlowListSkeleton";
 import React from "react";
-import FlowRunsListSkeleton from "@/components/monitor/skeletons/FlowRunsListSkeleton";
-import FlowRunsStatusSkeleton from "@/components/monitor/skeletons/FlowRunsStatusSkeleton";
+import { Skeleton } from "@/components/ui/skeleton";
 
-export default function MonitorLoadingSkeleton() {
+export default function LibraryRunLoadingSkeleton() {
   return (
-    <div className="space-y-4 p-4">
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        {/* Agents Section */}
-        <AgentFlowListSkeleton />
+    <div className="container justify-stretch p-0 lg:flex">
+      {/* Skeleton for sidebar with runs list */}
+      <div className="agpt-div w-[400px] border-b lg:border-b-0 lg:border-r">
+        <div className="p-4">
+          <Skeleton className="h-16 w-3/4" />
+          <div className="mt-4 space-y-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center space-x-2 py-2">
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
 
-        {/* Runs Section */}
-        <FlowRunsListSkeleton />
+      <div className="flex-1">
+        {/* Skeleton for agent header */}
+        <div className="agpt-div w-full border-b p-4">
+          <Skeleton className="h-8 w-1/2" />
+        </div>
 
-        {/* Stats Section */}
-        <FlowRunsStatusSkeleton />
+        {/* Skeleton for run details */}
+        <div className="p-4">
+          <div className="flex justify-between">
+            <Skeleton className="h-6 w-1/3" />
+            <Skeleton className="h-6 w-1/4" />
+          </div>
+          <div className="mt-6 space-y-4">
+            <Skeleton className="h-40 w-full" />
+            <Skeleton className="h-60 w-full" />
+          </div>
+        </div>
       </div>
     </div>
   );

autogpt_platform/frontend/src/app/library/agents/[id]/page.tsx

@@ -22,6 +22,7 @@ import AgentRunDraftView from "@/components/agents/agent-run-draft-view";
 import AgentRunDetailsView from "@/components/agents/agent-run-details-view";
 import AgentRunsSelectorList from "@/components/agents/agent-runs-selector-list";
 import AgentScheduleDetailsView from "@/components/agents/agent-schedule-details-view";
+import LibraryRunLoadingSkeleton from "./loading";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
 
 export default function AgentRunsPage(): React.ReactElement {
@@ -258,8 +259,7 @@ export default function AgentRunsPage(): React.ReactElement {
   );
 
   if (!agent || !graph) {
-    /* TODO: implement loading indicators / skeleton page */
-    return <span>Loading...</span>;
+    return <LibraryRunLoadingSkeleton />;
   }
 
   return (