Loading indicator on edit operations

svelte/src/filesystem/EditWindow.svelte

@@ -1,6 +1,9 @@
 <script>
 import { fs_delete_all, fs_rename, fs_update } from "./FilesystemAPI";
 import Modal from "../util/Modal.svelte";
+import { createEventDispatcher } from "svelte";
+
+let dispatch = createEventDispatcher()
 
 export let bucket = ""
 export let fs_navigator
@@ -37,6 +40,7 @@ let write_password = ""
 const save = async () => {
 	console.debug("Saving file", file.path)
 	try {
+		dispatch("loading", true)
 		await fs_update(
 			bucket,
 			file.path,
@@ -58,6 +62,8 @@ const save = async () => {
 		console.error(err)
 		alert(err)
 		return
+	} finally {
+		dispatch("loading", false)
 	}
 
 	if (open_after_edit) {
@@ -68,11 +74,14 @@ const save = async () => {
 }
 const delete_file = async () => {
 	try {
+		dispatch("loading", true)
 		await fs_delete_all(bucket, file.path)
 	} catch (err) {
 		console.error(err)
 		alert(err)
 		return
+	} finally {
+		dispatch("loading", false)
 	}
 
 	if (open_after_edit) {

svelte/src/filesystem/Filesystem.svelte

@@ -102,6 +102,10 @@ const search = async () => {
 
 	view = "search"
 }
+
+const loading_evt = e => {
+	loading = e.detail
+}
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -111,7 +115,7 @@ const search = async () => {
 <Navigator
 	bind:this={fs_navigator}
 	bind:state
-	on:loading={e => loading = e.detail}
+	on:loading={loading_evt}
 	on:navigation_complete={() => {
 		// Reset the view to the file view if we were in search view
 		view = "file"
@@ -155,7 +159,7 @@ const search = async () => {
 					fs_navigator={fs_navigator}
 					state={state}
 					edit_window={edit_window}
-					on:loading={e => {loading = e.detail}}
+					on:loading={loading_evt}
 					on:open_sibling={e => fs_navigator.open_sibling(e.detail)}
 					on:download={download}
 				/>
@@ -163,7 +167,7 @@ const search = async () => {
 				<SearchView
 					state={state}
 					fs_navigator={fs_navigator}
-					on:loading={e => {loading = e.detail}}
+					on:loading={loading_evt}
 				/>
 			{/if}
 		</div>
@@ -186,6 +190,7 @@ const search = async () => {
 		bind:visible={edit_visible}
 		bucket={state.root.id}
 		fs_navigator={fs_navigator}
+		on:loading={loading_evt}
 	/>
 </div>