Convert multiple pages into SPA

svelte/src/layout/checkout/Checkout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import PickAmount from "./PickAmount.svelte";
 import PickCountry from "./PickCountry.svelte";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
@@ -9,7 +8,6 @@ import { get_misc_vat_rate, get_user } from "lib/PixeldrainAPI";
 import { countries } from "country-data-list";
 import PickProvider from "./PickProvider.svelte";
 
-let loading = false
 let state: CheckoutState = {country: null, provider: null, amount: 0, vat: 0, name: ""}
 
 onMount(async () => {
@@ -42,8 +40,6 @@ onMount(async () => {
 </script>
 
 <div class="highlight_border">
-	<LoadingIndicator loading={loading}/>
-
 	{#if state.country !== null}
 		<div class="navbar">
 			{#if state.country !== null}
@@ -76,13 +72,13 @@ onMount(async () => {
 	{/if}
 
 	{#if state.country === null}
-		<PickCountry bind:state bind:loading={loading}/>
+		<PickCountry bind:state/>
 	{:else if state.provider === null}
 		<PickProvider bind:state/>
 	{:else if state.provider.need_name === true && state.name === ""}
 		<PickName bind:state/>
 	{:else}
-		<PickAmount bind:state bind:loading/>
+		<PickAmount bind:state/>
 	{/if}
 </div>
 

svelte/src/layout/checkout/PickAmount.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 import Euro from "util/Euro.svelte";
 import { checkout, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 
 const amounts = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
 let amount = 20
@@ -11,10 +11,13 @@ let amount = 20
 const submit = async (e: SubmitEvent) => {
 	e.preventDefault()
 
-	loading = true
 	state.amount = amount
-	await checkout(state)
-	loading = false
+	loading_start()
+	try {
+		await checkout(state)
+	}finally {
+		loading_finish()
+	}
 }
 </script>
 

svelte/src/layout/checkout/PickCountry.svelte

@@ -2,13 +2,12 @@
 import { countries } from "country-data-list";
 import { get_misc_vat_rate, put_user } from "lib/PixeldrainAPI";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 let country_input = ""
 
 const set_country = async (e?: Event) => {
-	loading = true
 	if (e !== undefined) {
 		e.preventDefault()
 	}
@@ -24,6 +23,7 @@ const set_country = async (e?: Event) => {
 	// with an invalid combination
 	state.provider = null
 
+	loading_start()
 	try {
 		// Save the user's country for later use
 		await put_user({checkout_country: c.alpha3})
@@ -34,7 +34,7 @@ const set_country = async (e?: Event) => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }