Feedback on refresh.

Author: amyjko

src/lib/EditableText.svelte

@@ -55,7 +55,7 @@
 			/>{:else}<span class="text"
 				>{#if text.length === 0}&mdash;{:else}{text}{/if}</span
 			>{/if}
-		{#if saving}<Loading text="" />{:else}<Button tip="Save this edit" action={save}
+		{#if saving}<Loading />{:else}<Button tip="Save this edit" action={save}
 				>{#if editing}&checkmark;{:else}✎{/if}</Button
 			>{/if}
 	</form>

src/lib/Loading.svelte

@@ -6,12 +6,10 @@
 		text?: string;
 	}
 
-	let { inline = true, text = 'Loading...' }: Props = $props();
+	let { inline = true }: Props = $props();
 </script>
 
-<div class:inline>
-	{text} <span class="dots">{Logo}</span>
-</div>
+<div class:inline><span class="dots">{Logo}</span></div>
 
 <style>
 	div {
@@ -30,17 +28,20 @@
 
 	.dots {
 		display: inline-block;
-		text-align: center;
+		text-align: baseline;
 		transform-origin: center;
-		animation: spin 1s infinite linear;
+		animation: spin 1s infinite ease-in-out;
 	}
 
 	@keyframes spin {
-		from {
-			transform: rotate(0deg);
+		0% {
+			transform: translateX(-0.5em);
 		}
-		to {
-			transform: rotate(360deg);
+		50% {
+			transform: translateX(0.5em);
+		}
+		100% {
+			transform: translateX(-0.5em);
 		}
 	}
 </style>

src/lib/MarkupView.svelte

@@ -118,7 +118,7 @@
 		</div>
 	{/if}
 	{#if edit}<div class="control">
-			{#if saving}<Loading text="" />
+			{#if saving}<Loading />
 			{:else}
 				<Button
 					tip={editing ? 'Save your edits.' : 'Start editing this markup.'}

src/routes/org/[orgid]/+layout.svelte

@@ -24,9 +24,12 @@
 	import { invalidateAll } from '$app/navigation';
 	import { type OrganizationRow } from '$database/Organization';
 	import { navigating } from '$app/state';
+	import Loading from '$lib/Loading.svelte';
 
 	let { data, children } = $props();
 
+	let loading = $state(false);
+
 	const db = getDB();
 
 	// Create a state to store the current organization. We'll store this as context.
@@ -55,7 +58,8 @@
 	// When realtime reports revised data, and we aren't navigating, reload all data and render accordingly.
 	function updateOrg() {
 		if (navigating.to === null) {
-			invalidateAll();
+			loading = true;
+			invalidateAll().then(() => (loading = false));
 		}
 	}
 
@@ -74,3 +78,21 @@
 </script>
 
 {@render children()}
+{#if loading}
+	<div class="banner">
+		<Loading />
+	</div>
+{/if}
+
+<style>
+	.banner {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: var(--spacing);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+</style>