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

Set delayed loading spinner and additional CSP headers

Browse Source
This commit is contained in:
thiloho
2024-09-25 16:02:12 +02:00
parent 0e3c0f094c
commit a9e2bd4cb7
14 changed files with 83 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web-app/src/lib/components/LoadingSpinner.svelte
View File

@@ -27,6 +27,6 @@
border: var(--border-primary);
border-width: 0.125rem;
border-block-start-color: var(--color-accent);
animation: spinner 0.6s linear infinite;
animation: spinner 500ms linear infinite;
}
</style>

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

@@ -7,6 +7,7 @@
const { form }: { form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -18,9 +19,10 @@
<form
method="POST"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
sending = false;
};
}}

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

@@ -7,6 +7,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -37,9 +38,10 @@
<form
method="POST"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
sending = false;
};
}}

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

@@ -10,6 +10,7 @@
const { form, data }: { form: ActionData; data: PageServerData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -30,9 +31,10 @@
method="POST"
action="?/createWebsite"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -120,9 +122,10 @@
method="POST"
action="?/updateWebsite"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -155,9 +158,10 @@
method="POST"
action="?/deleteWebsite"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -8,6 +8,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -42,9 +43,10 @@
method="POST"
action="?/logout"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -70,9 +72,10 @@
method="POST"
action="?/deleteAccount"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -27,6 +27,7 @@
};
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -52,9 +53,10 @@
method="POST"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -108,9 +110,10 @@
method="POST"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -160,9 +163,10 @@
action="?/updateHome"
method="POST"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -193,9 +197,10 @@
action="?/updateFooter"
method="POST"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}

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

@@ -10,6 +10,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -36,9 +37,10 @@
method="POST"
action="?/createArticle"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -135,9 +137,10 @@
method="POST"
action="?/deleteArticle"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -28,6 +28,7 @@
};
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -54,9 +55,10 @@
action="?/editArticle"
enctype="multipart/form-data"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}

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

@@ -9,6 +9,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -35,9 +36,10 @@
method="POST"
action="?/createCategory"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -79,9 +81,10 @@
method="POST"
action="?/updateCategory"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -117,9 +120,10 @@
method="POST"
action="?/deleteCategory"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -9,6 +9,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -35,9 +36,10 @@
method="POST"
action="?/addCollaborator"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -83,9 +85,10 @@
method="POST"
action="?/updateCollaborator"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};
@@ -114,9 +117,10 @@
method="POST"
action="?/removeCollaborator"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -18,6 +18,7 @@
};
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -62,9 +63,10 @@
method="POST"
action="?/createUpdateLegalInformation"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update({ reset: false });
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -93,9 +95,10 @@
action="?/deleteLegalInformation"
method="post"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -9,6 +9,7 @@
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let sending = $state(false);
let loadingDelay: number;
</script>
<SuccessOrError success={form?.success} message={form?.message} />
@@ -37,9 +38,10 @@
method="POST"
action="?/publishWebsite"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -68,9 +70,10 @@
method="POST"
action="?/createUpdateCustomDomainPrefix"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
sending = false;
};
}}
@@ -96,9 +99,10 @@
action="?/deleteCustomDomainPrefix"
method="post"
use:enhance={() => {
sending = true;
loadingDelay = window.setTimeout(() => (sending = true), 500);
return async ({ update }) => {
await update();
window.clearTimeout(loadingDelay);
window.location.hash = "!";
sending = false;
};

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

@@ -14,9 +14,21 @@
? "Dashboard"
: `${$page.url.pathname.charAt(1).toUpperCase()}${$page.url.pathname.slice(2)}`
);
let loading = $state(false);
let loadingDelay: number;
$effect(() => {
if ($navigating && ["link", "goto"].includes($navigating.type)) {
loadingDelay = window.setTimeout(() => (loading = true), 500);
} else {
window.clearTimeout(loadingDelay);
loading = false;
}
});
</script>
{#if $navigating && ["link", "goto"].includes($navigating.type)}
{#if loading}
<LoadingSpinner />
{/if}

14
web-app/svelte.config.js
View File

@@ -15,15 +15,17 @@ const config = {
csp: {
mode: "auto",
directives: {
"default-src": ["self"],
"default-src": ["none"],
"script-src": ["self"],
"style-src": ["self", "https:", "http:", "unsafe-inline"],
"img-src": ["self", "data:", "https:", "http:"],
"font-src": ["self", "https:", "http:"],
"style-src": ["self", "https:", "unsafe-inline"],
"img-src": ["self", "data:", "https:"],
"font-src": ["self", "https:"],
"connect-src": ["self"],
"frame-src": ["self", "https:", "http:"],
"frame-src": ["self", "https:"],
"object-src": ["none"],
"base-uri": ["self"]
"base-uri": ["self"],
"frame-ancestors": ["none"],
"form-action": ["self"]
}
}
}