added saving loading indicator in doll editor window

This commit is contained in:
2026-01-09 11:28:28 +08:00
parent a47f6e02c0
commit efb2a2e4d1

View File

@@ -11,6 +11,7 @@
let dollId: string | null = null; let dollId: string | null = null;
let loading = true; let loading = true;
let error: string | null = null; let error: string | null = null;
let saving = false;
let name = ""; let name = "";
let bodyColor = "#FFFFFF"; let bodyColor = "#FFFFFF";
@@ -49,6 +50,7 @@
async function handleSave() { async function handleSave() {
if (!name.trim()) return; if (!name.trim()) return;
saving = true;
try { try {
if (mode === "create") { if (mode === "create") {
const dto: CreateDollDto = { const dto: CreateDollDto = {
@@ -79,6 +81,8 @@
} catch (e) { } catch (e) {
error = (e as Error)?.message ?? String(e); error = (e as Error)?.message ?? String(e);
console.error("Failed to save doll:", e); console.error("Failed to save doll:", e);
} finally {
saving = false;
} }
} }
@@ -110,6 +114,7 @@
placeholder="Doll Name" placeholder="Doll Name"
class="input input-bordered w-full" class="input input-bordered w-full"
bind:value={name} bind:value={name}
disabled={saving}
/> />
</div> </div>
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
@@ -124,11 +129,13 @@
type="color" type="color"
class="input input-bordered w-12 p-1 h-10" class="input input-bordered w-12 p-1 h-10"
bind:value={bodyColor} bind:value={bodyColor}
disabled={saving}
/> />
<input <input
type="text" type="text"
class="input input-bordered w-full" class="input input-bordered w-full"
bind:value={bodyColor} bind:value={bodyColor}
disabled={saving}
/> />
</div> </div>
</div> </div>
@@ -141,22 +148,26 @@
type="color" type="color"
class="input input-bordered w-12 p-1 h-10" class="input input-bordered w-12 p-1 h-10"
bind:value={outlineColor} bind:value={outlineColor}
disabled={saving}
/> />
<input <input
type="text" type="text"
class="input input-bordered w-full" class="input input-bordered w-full"
bind:value={outlineColor} bind:value={outlineColor}
disabled={saving}
/> />
</div> </div>
</div> </div>
<div class="mt-auto pt-4 flex justify-end gap-2"> <div class="mt-auto pt-4 flex justify-end gap-2">
<button class="btn" on:click={handleCancel}>Cancel</button> <button class="btn" on:click={handleCancel} disabled={saving}>Cancel</button>
<button <button
class="btn btn-primary" class="btn btn-primary"
on:click={handleSave} on:click={handleSave}
disabled={!name.trim()} disabled={!name.trim() || saving}
> >
{#if mode === "create"} {#if saving}
<span class="loading loading-spinner loading-sm"></span> Saving...
{:else if mode === "create"}
Create Create
{:else} {:else}
Save Save