Better markup saving feedback.

CHANGELOG

@@ -19,6 +19,7 @@ Dates should be in`YYYY-MM-DD` format and versions are in [semantic versioning](
 - Cleaned up landing page.
 - Don't blur dialog background so that errors are visible.
 - Moved navigation feedback to the header.
+- Better markup saving feedback.
 
 ## v0.5.2
 

src/lib/Loading.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { locale } from '../types/Locales';
-	import Text from './Text.svelte';
 	import Logo from './Logo';
 
 	export let inline = true;
+	export let text: string = 'Loading...';
 
 	let count = 1;
+	const Increments = 5;
 
 	onMount(() => {
 		const timer = setInterval(() => {
-			count = (count + 1) % 5;
-		}, 100);
+			count = (count + 1) % Increments;
+		}, 50);
 		return () => {
 			clearInterval(timer);
 		};
 	});
 </script>
 
 <div class:inline>
-	<span class="dots"><Text text={$locale?.term.loading} /> {Logo.repeat(count)}</span>
+	{text} <span class="dots" style:transform="rotate({360 * (count / Increments)}deg)">{Logo}</span>
 </div>
 
 <style>
@@ -36,4 +36,10 @@
 		display: inline;
 		width: auto;
 	}
+
+	.dots {
+		display: inline-block;
+		text-align: center;
+		transform-origin: center;
+	}
 </style>

src/lib/MarkupView.svelte

@@ -6,6 +6,7 @@
 	import { tick } from 'svelte';
 	import { addError, getErrors } from './contexts';
 	import Note from './Note.svelte';
+	import Loading from './Loading.svelte';
 
 	/** The markup's text */
 	export let markup: string;
@@ -32,7 +33,7 @@
 	$: if (edit === undefined) markup = revisedText;
 
 	async function startEditing() {
-		revisedText = markup ?? '';
+		revisedText = markup;
 		editing = true;
 		await tick();
 		input?.focus();
@@ -41,6 +42,7 @@
 	async function save() {
 		if (edit) {
 			saving = true;
+			await new Promise((resolve) => setTimeout(resolve, 2000));
 			const error = await edit(revisedText ?? '');
 			if (error) {
 				addError(errors, 'Unable to save markup.', error);
@@ -84,17 +86,21 @@
 		</div>
 	{/if}
 	{#if edit}<div class="control">
-			<Button
-				tip={editing ? 'Save your edits.' : 'Start editing this markup.'}
-				action={async () => {
-					if (editing) {
-						save();
-					} else {
-						startEditing();
-					}
-				}}
-				>{#if editing}&checkmark;{:else}✎{/if}</Button
-			>
+			{#if saving}<Loading text="" />
+			{:else}
+				<Button
+					tip={editing ? 'Save your edits.' : 'Start editing this markup.'}
+					action={async () => {
+						if (editing) {
+							save();
+						} else {
+							startEditing();
+						}
+					}}
+					active={!saving}
+					>{#if editing}&checkmark;{:else}✎{/if}</Button
+				>
+			{/if}
 		</div>
 	{/if}
 </div>

src/lib/Page.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="header">
-	<Link to="/">{Logo}</Link>{#if $navigating}<Loading />{/if}<span class="account"
+	<Link to="/">{Logo}</Link>{#if $navigating}<Loading inline={false} />{/if}<span class="account"
 		>{#if $user}<Link to="/login">{$user.email}</Link>{:else}<Link to="/login">Login</Link
 			>{/if}</span
 	>