Show loading spinners for form actions and page loads

This commit is contained in:
thiloho
2024-09-07 14:28:23 +02:00
parent e153120a47
commit 958b8e3643
13 changed files with 193 additions and 6 deletions

View File

@@ -3,13 +3,20 @@
import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import Modal from "$lib/components/Modal.svelte";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
import type { ActionData, PageServerData } from "./$types";
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
</script>
<SuccessOrError success={form?.success} message={form?.message} />
{#if sending}
<LoadingSpinner />
{/if}
<WebsiteEditor
id={data.website.id}
contentType={data.website.content_type}
@@ -28,9 +35,11 @@
method="POST"
action="?/addCollaborator"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>
@@ -74,9 +83,11 @@
method="POST"
action="?/updateCollaborator"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
window.location.hash = "!";
sending = false;
};
}}
>
@@ -103,9 +114,11 @@
method="POST"
action="?/removeCollaborator"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>