AOSSIE-Org / AOSSIE-Org/Devr.AI

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

未关闭
#235 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
Python
星标
102
派生
137
PR 合并指标
30 天内没有已合并 PR

描述

## 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.

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。