From a09e63073924e4e2fc6674e8512a333b0adc6038 Mon Sep 17 00:00:00 2001
From: Dallas Hoffman <dallashoff@gmail.com>
Date: Sun, 24 Sep 2023 23:45:55 -0400
Subject: [PATCH] Add disabled and busy states to Button component

---
 src/lib/components/button.svelte                         | 4 ++++
 src/lib/components/settings/settings-import-modal.svelte | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
index 68e0367..146c8b6 100644
--- a/src/lib/components/button.svelte
+++ b/src/lib/components/button.svelte
@@ -3,6 +3,8 @@
 	export let secondary: boolean = false;
 	export let icon: boolean = false;
 	export let plain: boolean = false;
+	export let disabled: boolean = false;
+	export let busy: boolean = false;
 	export let size: 'sm' | 'md' | 'lg' = 'md';
 	export let label: string | null = null;
 	export let tooltipPlacement: 'top' | 'bottom' | 'left' | 'right' | null = 'top';
@@ -21,6 +23,8 @@
 	class:app-button--plain={plain}
 	class:app-button--icon={icon}
 	style:--size={fontSizes[size]}
+	disabled={disabled ? true : null}
+	aria-busy={busy ? true : null}
 	aria-label={label}
 	data-tooltip={tooltipPlacement ? label : null}
 	data-placement={tooltipPlacement}
diff --git a/src/lib/components/settings/settings-import-modal.svelte b/src/lib/components/settings/settings-import-modal.svelte
index 15d9c39..da2300e 100644
--- a/src/lib/components/settings/settings-import-modal.svelte
+++ b/src/lib/components/settings/settings-import-modal.svelte
@@ -5,13 +5,17 @@
 
 	export let open: boolean;
 
+	let submitting: boolean = false;
+
 	async function submit(event: SubmitEvent) {
+		submitting = true;
 		const form = event.target as HTMLFormElement;
 		const formData = new FormData(form);
 		const [dbFile] = formData.getAll('dbFile') as File[];
 
 		if (!dbFile || dbFile.name === '') {
 			// TODO: message that no file was selected
+			submitting = false;
 			return;
 		}
 
@@ -23,6 +27,8 @@
 		} else {
 			// TODO: message that import failed
 		}
+
+		submitting = false;
 	}
 </script>
 
@@ -34,7 +40,7 @@
 			This will overwrite all of your current notes.
 		</p>
 		<input type="file" name="dbFile" accept=".db" />
-		<Button type="submit">Import</Button>
+		<Button type="submit" busy={submitting}>Import</Button>
 	</form>
 </Modal>