Convert multiple pages into SPA

svelte/src/user_home/BandwidthSharing.svelte

@@ -2,24 +2,22 @@
 import { onMount } from "svelte";
 import Pro from "icons/Pro.svelte";
 import { formatDataVolume } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import ProgressBar from "util/ProgressBar.svelte";
 import SuccessMessage from "util/SuccessMessage.svelte";
+    import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = false
 let success_message
 let hotlinking = window.user.hotlinking_enabled
 let transfer_cap = window.user.monthly_transfer_cap / 1e12
 let skip_viewer = window.user.skip_file_viewer
 
 const update = async () => {
-	loading = true
-
 	const form = new FormData()
 	form.append("hotlinking_enabled", hotlinking)
 	form.append("transfer_cap", transfer_cap*1e12)
 	form.append("skip_file_viewer", skip_viewer)
 
+	loading_start()
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/user",
@@ -37,7 +35,7 @@ const update = async () => {
 	} catch (err) {
 		success_message.set(false, "Failed to update subscription: "+err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
@@ -78,8 +76,6 @@ onMount(() => {
 
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
 	<SuccessMessage bind:this={success_message}></SuccessMessage>