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

18
web-app/src/routes/(anonymous)/login/+page.svelte
View File

@@ -2,13 +2,29 @@
import { enhance } from "$app/forms";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData } from "./$types";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { form }: { form: ActionData } = $props();
let sending = $state(false);
</script>
<SuccessOrError success={form?.success} message={form?.message} />
<form method="POST" use:enhance>
{#if sending}
<LoadingSpinner />
{/if}
<form
method="POST"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
sending = false;
};
}}
>
<label>
Username:
<input type="text" name="username" required />

18
web-app/src/routes/(anonymous)/register/+page.svelte
View File

@@ -2,13 +2,29 @@
import { enhance } from "$app/forms";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData } from "./$types";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { form }: { form: ActionData } = $props();
let sending = $state(false);
</script>
<SuccessOrError success={form?.success} message={form?.message} />
<form method="POST" use:enhance>
{#if sending}
<LoadingSpinner />
{/if}
<form
method="POST"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
sending = false;
};
}}
>
<label>
Username:
<input type="text" name="username" minlength="3" maxlength="16" required />

13
web-app/src/routes/(authenticated)/+page.svelte
View File

@@ -5,12 +5,19 @@
import Modal from "$lib/components/Modal.svelte";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { form, data }: { form: ActionData; data: PageServerData } = $props();
let sending = $state(false);
</script>
<SuccessOrError success={form?.success} message={form?.message} />
{#if sending}
<LoadingSpinner />
{/if}
<section id="create-website">
<h2>
<a href="#create-website">Create website</a>
@@ -23,9 +30,11 @@
method="POST"
action="?/createWebsite"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>
@@ -111,9 +120,11 @@
method="POST"
action="?/updateWebsite"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update({ reset: false });
window.location.hash = "!";
sending = false;
};
}}
>
@@ -144,9 +155,11 @@
method="POST"
action="?/deleteWebsite"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>

21
web-app/src/routes/(authenticated)/account/+page.svelte
View File

@@ -2,13 +2,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}
<section id="overview">
<h2>
<a href="#overview">Overview</a>
@@ -31,7 +38,17 @@
<a href="#logout">Logout</a>
</h2>
<form method="POST" action="?/logout" use:enhance>
<form
method="POST"
action="?/logout"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
sending = false;
};
}}
>
<button type="submit">Logout</button>
</form>
</section>
@@ -53,9 +70,11 @@
method="POST"
action="?/deleteAccount"
use:enhance={() => {
sending = true;
return async ({ update }) => {
await update();
window.location.hash = "!";
sending = false;
};
}}
>

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>

15
web-app/src/routes/+layout.svelte
View File

@@ -3,9 +3,20 @@
import { page } from "$app/stores";
import type { LayoutServerData } from "./$types";
import type { Snippet } from "svelte";
import { beforeNavigate, afterNavigate } from "$app/navigation";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
const { data, children }: { data: LayoutServerData; children: Snippet } = $props();
let loading = $state(false);
beforeNavigate(() => {
loading = true;
});
afterNavigate(() => {
loading = false;
});
const isProjectRoute = $derived($page.url.pathname.startsWith("/website") && !$page.error);
const routeName = $derived(
$page.url.pathname === "/"
@@ -14,6 +25,10 @@
);
</script>
{#if loading}
<LoadingSpinner />
{/if}
<svelte:head>
<title>archtika | {routeName.replaceAll("/", " - ")}</title>
</svelte:head>