payloadcms / payloadcms/payload
plugin-seo: Auto-generate button has no loading state when generateTitle/generateURL is async
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
The Auto-generate button in the SEO plugin fields (MetaTitleComponent, MetaDescriptionComponent) does not show any loading state while the async generateTitle / generateDescription function is running.
Both components call the async function with void and never set a loading flag:
MetaTitleComponent — packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
onClick: () => {
void regenerateTitle() // no loading state
}
MetaDescriptionComponent — packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
onClick: () => {
void regenerateDescription() // no loading state
}
The button stays enabled and shows no spinner while an async fetch to /api/plugin-seo/generate-title (or generate-description) is in progress. When generateTitle/generateDescription performs a DB lookup (e.g. fetching tenant config), the wait can be multiple seconds with zero UI feedback.
Expected Behavior
- The button should be
disabledwhile the request is in flight - A loading indicator (spinner or text change) should be shown
- Applies to both
MetaTitleComponentandMetaDescriptionComponent
Reproduction
No reproduction repo needed — the issue is visible in the source directly.
Both regenerateTitle and regenerateDescription are async (they await a fetch), but the button onClick handlers do not track the pending state.
Payload Version
3.84.1
Environment
@payloadcms/plugin-seov3.84.1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx and packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx. Read regenerateTitle and regenerateDescription, then trace their Auto-generate button handlers. Done means both buttons are disabled and visibly indicate loading until their async fetch completes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- Half a day
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100