Merge pull request #118 from SnowCait/loading-timeline-animation

Loading timeline animation

web/src/routes/TimelineView.svelte

@@ -8,11 +8,13 @@
 	import Reaction from './timeline/Reaction.svelte';
 	import { pubkey } from '../stores/Author';
 	import { Author } from '$lib/Author';
+	import Loading from './Loading.svelte';
 
 	export let events: Event[] = [];
 	export let readonly = false;
 	export let focusEventId: string | undefined = undefined;
 	export let load: () => Promise<void>;
+	export let showLoading = true;
 	export let createdAtFormat: 'auto' | 'time' = 'auto';
 
 	let loading = false;
@@ -55,6 +57,9 @@
 		</li>
 	{/each}
 </ul>
+{#if showLoading}
+	<div class="loading"><Loading /></div>
+{/if}
 
 <style>
 	ul {
@@ -79,6 +84,11 @@
 		border-left: 2px solid lightcoral;
 	}
 
+	.loading {
+		width: 24px;
+		margin: 0 auto;
+	}
+
 	@keyframes add {
 		0% {
 			opacity: 0;

web/src/routes/[note=note]/+page.svelte

@@ -137,4 +137,10 @@
 
 <h1>note</h1>
 
-<TimelineView {events} readonly={false} focusEventId={eventId} load={async () => console.debug()} />
+<TimelineView
+	{events}
+	readonly={false}
+	focusEventId={eventId}
+	load={async () => console.debug()}
+	showLoading={false}
+/>

web/src/routes/[npub=npub]/+page.svelte

@@ -292,7 +292,6 @@
 		events={notes}
 		readonly={!$authorPubkey}
 		load={async () => {
-			console.warn('load', pubkey);
 			const oldestCreatedAt = notes.at(notes.length - 1)?.created_at;
 			const events = await fetchPastNotes(
 				pubkey,

web/src/routes/search/+page.svelte

@@ -117,7 +117,12 @@
 
 <NoteIdsView />
 
-<TimelineView events={$searchEvents} readonly={true} load={async () => console.debug()} />
+<TimelineView
+	events={$searchEvents}
+	readonly={true}
+	load={async () => console.debug()}
+	showLoading={false}
+/>
 
 <style>
 	h1 a {