[Enhancement] Implement Dynamic Loading States and Inline Validation for Model Configuration Forms

[Kalpana-chavhan]

Issue Description

Description

Currently, the user interface for configuring and submitting AI model parameters lacks sufficient visual feedback. When a user submits a configuration or inputs data, there is a lack of real-time validation and no "loading" indicator during asynchronous API calls.
This can lead to a confusing user experience, duplicate submissions, and uncertainty regarding whether a process is running.

---

Impact

Providing immediate visual feedback ensures that the application feels responsive and professional.
It prevents users from making input errors before submission and stops "double-submission" bugs by disabling buttons during the loading state.

---

Proposed Changes

I propose adding a robust feedback loop to the configuration UI:

• Button Loading States: * Update the "Submit" or "Run" buttons to display a spinner and become disabled once clicked.
  Revert to the active state only after a response (Success/Error) is received from the backend.
• Inline Form Validation: * Add real-time validation for numerical inputs (e.g., Learning Rate must be between 0 and 1).
• Highlight fields in red with a brief error message if the input is invalid.
• Toast Notifications: * Implement "Success" or "Failure" toast notifications (snackbars) to confirm that a background task has started or failed.

---

Technical Implementation Suggestion

• Introduce an isLoading state variable to manage the UI transition during API calls.
• Use conditional rendering for the button content: {isLoading ? : 'Run Model'}.
• (If applicable) Integrate a lightweight notification library like react-hot-toast or use the project's existing UI framework components.

---

Verification Plan

• Manual Test: Click the submit button and verify it becomes disabled and shows a spinner.
• Validation Test: Enter an out-of-range value in a parameter field and verify the error message appears immediately.
• Network Test: Simulate a slow network connection to ensure the loading state persists until the data is returned.

[bnyashwanth]

Hi @Kalpana-chavhan, I would like to work on this issue!

I have experience with React state management and UI feedback patterns. I can implement the proposed changes:

1. Loading States: adding isLoading states to disable buttons and show spinners during API calls.
2. Inline Validation: adding real-time checks for form inputs.
3. Toast Notifications: integrating user feedback for success/error states.

Please assign this to me!

[VineetC137]

Hi maintainers,
I reviewed the codebase and noticed that dynamic loading states, inline validation, and toast feedback are already implemented in IntegrationModal.tsx.

• Submit button disables during async calls
• Spinner and loading text shown
• Inline validation with error messages
• Success and error toasts handled
  It looks like this issue may already be resolved. Happy to help further if additional validation or UX improvements are needed.