refac

src/lib/components/channel/Thread.svelte

@@ -10,6 +10,7 @@
 	import Messages from './Messages.svelte';
 	import { onDestroy, onMount, tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -175,28 +176,34 @@
 		</div>
 
 		<div class=" max-h-full w-full overflow-y-auto" bind:this={messagesContainerElement}>
-			<Messages
-				id={threadId}
-				{channel}
-				{messages}
-				{top}
-				thread={true}
-				onLoad={async () => {
-					const newMessages = await getChannelThreadMessages(
-						localStorage.token,
-						channel.id,
-						threadId,
-						messages.length
-					);
-
-					messages = [...messages, ...newMessages];
-
-					if (newMessages.length < 50) {
-						top = true;
-						return;
-					}
-				}}
-			/>
+			{#if messages !== null}
+				<Messages
+					id={threadId}
+					{channel}
+					{messages}
+					{top}
+					thread={true}
+					onLoad={async () => {
+						const newMessages = await getChannelThreadMessages(
+							localStorage.token,
+							channel.id,
+							threadId,
+							messages.length
+						);
+
+						messages = [...messages, ...newMessages];
+
+						if (newMessages.length < 50) {
+							top = true;
+							return;
+						}
+					}}
+				/>
+			{:else}
+				<div class="w-full flex justify-center pt-5 pb-10">
+					<Spinner />
+				</div>
+			{/if}
 
 			<div class=" pb-[1rem] px-2.5 w-full">
 				<MessageInput