Convert multiple pages into SPA

svelte/src/admin_panel/EmailReporters.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { onMount, tick } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import EmailReportersTable from "./EmailReportersTable.svelte";
 import { get_endpoint } from "lib/PixeldrainAPI";
+import { loading_finish, loading_start } from "lib/Loading";
 
 type Reporter = {
 	from_address: string,
@@ -17,7 +17,6 @@ type Reporter = {
 	last_message_html: string,
 }
 
-let loading = true
 let reporters: Reporter[] = []
 $: reporters_pending = reporters.reduce((acc, val) => {
 	if (val.status === "pending") {
@@ -39,7 +38,7 @@ $: reporters_rejected = reporters.reduce((acc, val) => {
 }, [])
 
 const get_reporters = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(get_endpoint()+"/admin/abuse_reporter");
 		if(resp.status >= 400) {
@@ -49,7 +48,7 @@ const get_reporters = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -137,8 +136,6 @@ const delete_reporter = async (reporter: Reporter) => {
 onMount(get_reporters);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div class="toolbar_spacer"></div>