添加加载状态指示器
- 在切换供应商时显示加载状态 - 禁用操作按钮防止重复提交 - 提供视觉反馈改善用户体验
This commit is contained in:
@@ -8,6 +8,7 @@ interface ProviderListProps {
|
||||
onSwitch: (id: string) => void
|
||||
onDelete: (id: string) => void
|
||||
onEdit: (id: string) => void
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
const ProviderList: React.FC<ProviderListProps> = ({
|
||||
@@ -15,7 +16,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
||||
currentProviderId,
|
||||
onSwitch,
|
||||
onDelete,
|
||||
onEdit
|
||||
onEdit,
|
||||
isLoading = false
|
||||
}) => {
|
||||
return (
|
||||
<div className="provider-list">
|
||||
@@ -52,20 +54,21 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
||||
<button
|
||||
className="enable-btn"
|
||||
onClick={() => onSwitch(provider.id)}
|
||||
disabled={isCurrent}
|
||||
disabled={isCurrent || isLoading}
|
||||
>
|
||||
启用
|
||||
{isLoading ? '处理中...' : '启用'}
|
||||
</button>
|
||||
<button
|
||||
className="edit-btn"
|
||||
onClick={() => onEdit(provider.id)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
className="delete-btn"
|
||||
onClick={() => onDelete(provider.id)}
|
||||
disabled={isCurrent}
|
||||
disabled={isCurrent || isLoading}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user