github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(marketplace): loading state (#10629)

Browse Source 
## Changes 🏗️

Use a skeleton for the martkeplace loading state, representing visually
how the place should looks. Looks a bit more stylish than the previous
`Loading...` text.

### Before

<img width="800" height="774" alt="Screenshot 2025-08-12 at 16 01 22"
src="https://github.com/user-attachments/assets/29e44a1a-2089-468c-a253-3a6b763ada5a"
/>

### After

<img width="800" height="761" alt="Screenshot 2025-08-12 at 16 01 01"
src="https://github.com/user-attachments/assets/5ad362ae-df1d-4a1b-90ae-9349a81a4d75"
/>


## 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:
  - [x] Martketplace loading state looks good across screen sizes


### For configuration changes:

None
This commit is contained in:
Ubbe
2025-08-13 14:55:23 +02:00
committed by GitHub
parent 793de77e76
commit 41f500790f
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.tsx
View File

@@ -6,6 +6,7 @@ import { HeroSection } from "../HeroSection/HeroSection";
import { AgentsSection } from "../AgentsSection/AgentsSection";
import { useMainMarketplacePage } from "./useMainMarketplacePage";
import { FeaturedCreators } from "../FeaturedCreators/FeaturedCreators";
import { Skeleton } from "@/components/ui/skeleton";
export const MainMarkeplacePage = () => {
const { featuredAgents, topAgents, featuredCreators, isLoading, hasError } =
@@ -16,8 +17,26 @@ export const MainMarkeplacePage = () => {
return (
<div className="mx-auto w-screen max-w-[1360px]">
<main className="px-4">
<div className="flex min-h-[400px] items-center justify-center">
<div className="text-lg">Loading...</div>
<div className="flex flex-col gap-2 pt-16">
<div className="flex flex-col items-center justify-center gap-8">
<Skeleton className="h-16 w-[60%]" />
<Skeleton className="h-12 w-[40%]" />
</div>
<div className="flex flex-col items-center justify-center gap-8 pt-8">
<Skeleton className="h-8 w-[60%]" />
</div>
<div className="mx-auto flex w-[80%] flex-wrap items-center justify-center gap-8 pt-24">
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
<Skeleton className="h-[12rem] w-[12rem]" />
</div>
</div>
</main>
</div>