Add disabled and busy states to Button component

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}

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>