Convert multiple pages into SPA

svelte/src/admin_panel/AbuseReports.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import AbuseReport from "./AbuseReport.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
 let loading = true
 let reports = []
@@ -12,7 +12,7 @@ let endPicker
 let tab = "pending"
 
 const get_reports = async () => {
-	loading = true;
+	loading_start()
 
 	// Remove refresh timeout if there is one
 	clearTimeout(refresh_timeout)
@@ -70,7 +70,7 @@ const get_reports = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -156,8 +156,6 @@ onMount(() => {
 });
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div>Reports: {reports.length}</div>

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>

svelte/src/admin_panel/Home.svelte

@@ -276,24 +276,12 @@ onDestroy(() => {
 			</tr>
 		</thead>
 		<tbody>
-			<tr>
-				<td>File statistics (per file)</td>
-				<td>{status.stats_watcher_threads}</td>
-				<td>{status.stats_watcher_listeners}</td>
-				<td>{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}</td>
-			</tr>
 			<tr>
 				<td>Filesystem statistics (per file)</td>
 				<td>{status.filesystem_watcher_threads}</td>
 				<td>{status.filesystem_watcher_listeners}</td>
 				<td>{(status.filesystem_watcher_listeners / status.filesystem_watcher_threads).toPrecision(3)}</td>
 			</tr>
-			<tr>
-				<td>Rate limits (per IP)</td>
-				<td>{status.rate_limit_watcher_threads}</td>
-				<td>{status.rate_limit_watcher_listeners}</td>
-				<td>{(status.rate_limit_watcher_listeners / status.rate_limit_watcher_threads).toPrecision(3)}</td>
-			</tr>
 			<tr>
 				<td>Downloads (per IP)</td>
 				<td>{status.download_clients}</td>

svelte/src/admin_panel/IPBans.svelte

@@ -2,7 +2,7 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
+import { loading_finish } from "lib/Loading";
 
 const abuse_types = [
 	"copyright",
@@ -15,7 +15,6 @@ const abuse_types = [
 	"revenge_porn",
 ]
 
-let loading = true
 let rows = []
 let total_offences = 0
 
@@ -25,7 +24,7 @@ let new_ban_address
 let new_ban_reason = abuse_types[0]
 
 const get_bans = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/admin/ip_ban");
 		if(resp.status >= 400) {
@@ -39,7 +38,7 @@ const get_bans = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish();
 	}
 };
 
@@ -95,8 +94,6 @@ const delete_ban = async (addr) => {
 onMount(get_bans);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar">
 		<div class="toolbar_label">

svelte/src/admin_panel/InvoiceVAT.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Expandable from "util/Expandable.svelte";
 import SortableTable, { FieldType } from "layout/SortableTable.svelte";
 import { country_name, get_admin_invoices, type Invoice } from "lib/AdminAPI";
 import PayPalVat from "./PayPalVAT.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let invoices: Invoice[] = []
 
 let year = 0
@@ -62,7 +61,7 @@ const obj_to_list_eu = (obj: {[id: string]: Total}) => {
 }
 
 const get_invoices = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await get_admin_invoices(year, month)
 
@@ -92,7 +91,7 @@ const get_invoices = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -158,8 +157,6 @@ let records_hidden = 0
 let invoices_filtered: Invoice[] = []
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h3>{year + "-" + ("00"+(month)).slice(-2)}</h3>
 	<div class="toolbar">

svelte/src/admin_panel/MollieSettlement.svelte

@@ -2,11 +2,10 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import { mollie_proxy_call } from "./MollieAPI";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
+import { loading_start } from "lib/Loading";
 
 export let settlement = {}
-let loading = true
 let payments = []
 
 let per_country = {}
@@ -49,7 +48,7 @@ const load_all_payments = async (settlement_id) => {
 }
 
 const get_payments = async () => {
-	loading = true;
+	loading_start()
 	try {
 		payments = await load_all_payments(settlement.id)
 
@@ -84,15 +83,13 @@ const get_payments = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
 onMount(get_payments);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <h3>Accounting information</h3>
 
 {#if per_country.NL}

svelte/src/admin_panel/MollieSettlements.svelte

@@ -2,17 +2,16 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
 import MollieSettlement from "./MollieSettlement.svelte";
 import { mollie_proxy_call } from "./MollieAPI";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let response = {}
 let settlements = []
 
 const get_settlements = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const req = await mollie_proxy_call("settlements?limit=250");
 		if(req.status >= 400) {
@@ -23,15 +22,13 @@ const get_settlements = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
 onMount(get_settlements);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	{#each settlements as row (row.id)}
 		<Expandable click_expand>

svelte/src/admin_panel/PayPalTaxes.svelte

@@ -2,10 +2,9 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let response = {}
 let payments = []
 
@@ -40,8 +39,8 @@ const get_payments = async () => {
 		fee: 0,
 	}
 	payments = []
-	loading = true;
 
+	loading_start()
 	try {
 		await get_page("https://api.mollie.com/v2/payments?limit=250")
 
@@ -76,7 +75,7 @@ const get_payments = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 
@@ -118,8 +117,6 @@ onMount(() => {
 });
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div>Payments: {payments.length}</div>

svelte/src/admin_panel/user_bans/UserBans.svelte

@@ -2,19 +2,18 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Button from "layout/Button.svelte"
 import UserFiles from "./UserFiles.svelte";
 import BanDetails from "./BanDetails.svelte";
 import UserLists from "./UserLists.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let rows = []
 let total_offences = 0
 let expanded = false
 
 const get_bans = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/admin/user_ban");
 		if(resp.status >= 400) {
@@ -28,7 +27,7 @@ const get_bans = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -105,8 +104,6 @@ const block_all_files = async (row, reason) => {
 onMount(get_bans);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar">
 		<div class="toolbar_label">

svelte/src/admin_panel/user_bans/UserFiles.svelte

@@ -1,16 +1,16 @@
 <script>
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import { formatDataVolume, formatDate } from "util/Formatting";
 import SortButton from "layout/SortButton.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let user_id = ""
 let files = []
-let loading = true
 
 onMount(() => reload())
 
 export const reload = async () => {
+	loading_start()
 	try {
 		const req = await fetch(
 			window.api_endpoint+"/user/files",
@@ -30,7 +30,7 @@ export const reload = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 
@@ -67,8 +67,6 @@ const sort = (field) => {
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="table_scroll">
 	<table>
 		<thead>

svelte/src/admin_panel/user_bans/UserLists.svelte

@@ -1,15 +1,15 @@
 <script>
+import { loading_finish, loading_start } from "lib/Loading";
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import { formatDate } from "util/Formatting";
 
 export let user_id = ""
 let lists = []
-let loading = true
 
 onMount(() => reload())
 
 export const reload = async () => {
+	loading_start()
 	try {
 		const req = await fetch(
 			window.api_endpoint+"/user/lists",
@@ -28,13 +28,11 @@ export const reload = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="table_scroll">
 	<table>
 		<thead>