feat: 添加提交按钮的加载状态,防止重复提交
All checks were successful
Push to Helm Chart Repository / build (push) Successful in 17s

This commit is contained in:
2025-09-20 14:49:56 +08:00
parent 640b3299ac
commit 3a862856c3

View File

@ -32,6 +32,7 @@ export function UserProfilePage() {
const [username, setUsername] = useState(user?.username || '') const [username, setUsername] = useState(user?.username || '')
const [avatarFile, setAvatarFile] = useState<File | null>(null) const [avatarFile, setAvatarFile] = useState<File | null>(null)
const [avatarFileUrl, setAvatarFileUrl] = useState<string | null>(null) // 这部分交由useEffect控制监听 avatarFile 变化 const [avatarFileUrl, setAvatarFileUrl] = useState<string | null>(null) // 这部分交由useEffect控制监听 avatarFile 变化
const [submitting, setSubmitting] = useState(false)
const [gender, setGender] = useState(user?.gender || '') const [gender, setGender] = useState(user?.gender || '')
@ -101,6 +102,7 @@ export function UserProfilePage() {
} }
let avatarUrl = user.avatarUrl; let avatarUrl = user.avatarUrl;
setSubmitting(true);
(async () => { (async () => {
if (avatarFile) { if (avatarFile) {
try { try {
@ -119,8 +121,11 @@ export function UserProfilePage() {
window.location.reload(); window.location.reload();
} catch (error: unknown) { } catch (error: unknown) {
toast.error(`Failed to update profile ${error}`); toast.error(`Failed to update profile ${error}`);
} finally {
setSubmitting(false);
} }
})(); })();
} }
const handleCropped = (blob: Blob) => { const handleCropped = (blob: Blob) => {
@ -158,7 +163,7 @@ export function UserProfilePage() {
<Input type="username" id="username" value={username} onChange={(e) => setUsername(e.target.value)} /> <Input type="username" id="username" value={username} onChange={(e) => setUsername(e.target.value)} />
<Label htmlFor="gender">Gender</Label> <Label htmlFor="gender">Gender</Label>
<Input type="gender" id="gender" value={gender} onChange={(e) => setGender(e.target.value)}/> <Input type="gender" id="gender" value={gender} onChange={(e) => setGender(e.target.value)}/>
<Button className="max-w-1/3" onClick={handleSubmit}>Submit</Button> <Button className="max-w-1/3" onClick={handleSubmit} disabled={submitting}>Submit{submitting && '...'}</Button>
</div> </div>
</div> </div>
) )