feat(frontend/library): Replace "Loading..." by loading spinners (#9993)

- Resolves #9992

### Changes 🏗️

- Use `<LoadingBox>` instead of "Loading..." on `/library/agents/[id]`

![2025-05-20 23 26
vivaldi](https://github.com/user-attachments/assets/6fe8ce60-c249-4e4c-b3f1-eea925b003d3)


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Designer approves based on screencapture

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

@@ -39,7 +39,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { LoadingSpinner } from "@/components/ui/loading";
+import LoadingBox, { LoadingSpinner } from "@/components/ui/loading";
 
 export default function AgentRunsPage(): React.ReactElement {
   const { id: agentID }: { id: LibraryAgentID } = useParams();
@@ -357,8 +357,7 @@ export default function AgentRunsPage(): React.ReactElement {
   );
 
   if (!agent || !graph) {
-    /* TODO: implement loading indicators / skeleton page */
-    return <span>Loading...</span>;
+    return <LoadingBox className="h-[90vh]" />;
   }
 
   return (
@@ -416,7 +415,7 @@ export default function AgentRunsPage(): React.ReactElement {
               agentActions={agentActions}
             />
           )
-        ) : null) || <p>Loading...</p>}
+        ) : null) || <LoadingBox className="h-[70vh]" />}
 
         <DeleteConfirmDialog
           entityType="agent"

autogpt_platform/frontend/src/components/agents/agent-run-details-view.tsx

@@ -17,6 +17,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { IconRefresh, IconSquare } from "@/components/ui/icons";
 import { useToastOnFail } from "@/components/ui/use-toast";
 import ActionButtonGroup from "@/components/agptui/action-button-group";
+import LoadingBox from "@/components/ui/loading";
 import { Input } from "@/components/ui/input";
 
 import {
@@ -252,7 +253,7 @@ export default function AgentRunDetailsView({
                   ),
                 )
               ) : (
-                <p>Loading...</p>
+                <LoadingBox spinnerSize={12} className="h-24" />
               )}
             </CardContent>
           </Card>
@@ -271,7 +272,7 @@ export default function AgentRunDetailsView({
                 </div>
               ))
             ) : (
-              <p>Loading...</p>
+              <LoadingBox spinnerSize={12} className="h-24" />
             )}
           </CardContent>
         </Card>

autogpt_platform/frontend/src/components/agents/agent-schedule-details-view.tsx

@@ -13,6 +13,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { AgentRunStatus } from "@/components/agents/agent-run-status-chip";
 import { useToastOnFail } from "@/components/ui/use-toast";
 import ActionButtonGroup from "@/components/agptui/action-button-group";
+import LoadingBox from "@/components/ui/loading";
 import { Input } from "@/components/ui/input";
 
 export default function AgentScheduleDetailsView({
@@ -113,7 +114,7 @@ export default function AgentScheduleDetailsView({
                 </div>
               ))
             ) : (
-              <p>Loading...</p>
+              <LoadingBox spinnerSize={12} className="h-24" />
             )}
           </CardContent>
         </Card>