The 'Create' button remains active during form submission, leading to multiple requests

Problem Statement

The 'Create' button on content creation forms (e.g., Create Page) remains enabled while the API request is being processed. This can lead to users clicking the button multiple times, which sends duplicate requests and can cause errors such as "Bad request error" as seen in the provided video. This poor user experience gives the impression that the initial click failed.

Steps to Reproduce

1. Navigate to the dotCMS backend.
2. Go to Content Types > Content Type > Add > Page.
3. Fill out the required fields in the "Create Page" modal.
4. Click the Create button.
5. Immediately attempt to click the button again before the API request completes.

Acceptance Criteria

• The Create button must be disabled immediately after the user's first click.
• The button should display a visual loading state (e.g., a spinner or "Loading...") to inform the user that the request is in progress.
• Upon a successful response, the modal should close as expected.
• If the request fails, the button should return to its original enabled state, allowing the user to try again.

dotCMS Version

latest

Proposed Objective

Please Select

Proposed Priority

Please Select

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

https://github.com/user-attachments/assets/ac45f079-f874-4e3d-9fd6-6aa3fd6f84a6

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

Start by reproducing the issue in the dotCMS backend through the Content Types > Content Type > Add > Page flow, then locate the Create Page modal and its API submission flow. Done means the Create button disables immediately, shows a loading state, the modal closes after success, and the button is re-enabled when the request fails.