thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Show loading spinners for form actions and page loads

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
View File

@@ -5,6 +5,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, LayoutServerData, PageServerData } from "./$types";
import Modal from "$lib/components/Modal.svelte";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { data, form }: { data: PageServerData & LayoutServerData; form: ActionData } = $props();
@@ -24,10 +25,16 @@
previewContent = newContent;
}
};
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}
@@ -44,8 +51,10 @@
method="POST"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
sending = false;
};
}}
>
@@ -98,8 +107,10 @@
method="POST"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
sending = false;
};
}}
>
@@ -148,8 +159,10 @@
action="?/updateHome"
method="POST"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
sending = false;
};
}}
>
@@ -179,8 +192,10 @@
action="?/updateFooter"
method="POST"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
sending = false;
};
}}
>

2
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
View File

@@ -16,8 +16,6 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent
baseFetchUrl += "&order=last_modified_at.desc,created_at.desc";
}
console.log(baseFetchUrl);
const parameters = new URLSearchParams();
if (searchQuery) {

11
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
View File

@@ -4,13 +4,20 @@
import { enhance } from "$app/forms";
import Modal from "$lib/components/Modal.svelte";
import SuccessOrError from "$lib/components/SuccessOrError.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}
@@ -29,9 +36,11 @@
method="POST"
action="?/createArticle"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>
@@ -126,9 +135,11 @@
method="POST"
action="?/deleteArticle"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>

9
web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
View File

@@ -5,6 +5,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import Modal from "$lib/components/Modal.svelte";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
import { handleImagePaste } from "$lib/utils";
const { data, form }: { data: PageServerData; form: ActionData } = $props();
@@ -24,10 +25,16 @@
previewContent = newContent;
}
};
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}
@@ -46,8 +53,10 @@
action="?/editArticle"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
sending = false;
};
}}
>

13
web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
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="?/createCategory"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>
@@ -70,9 +79,11 @@
method="POST"
action="?/updateCategory"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
window.location.hash = "!";
sending = false;
};
}}
>
@@ -95,9 +106,11 @@
method="POST"
action="?/deleteCategory"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>

13
web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
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;
};
}}
>

19
web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
View File

@@ -3,14 +3,21 @@
import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { data, form }: { data: PageServerData; form: ActionData } = $props();
const prodWebsiteUrl = data.websitePreviewUrl.replace("/previews", "");
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}
@@ -27,7 +34,17 @@
is published. If you are happy with the results, click the button below and your website will
be published on the Internet.
</p>
<form method="POST" action="?/publishWebsite" use:enhance>
<form
method="POST"
action="?/publishWebsite"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
sending = false;
};
}}
>
<button type="submit">Publish</button>
</form>