refac: styling

src/lib/components/channel/Channel.svelte

@@ -22,6 +22,7 @@
 	import EllipsisVertical from '../icons/EllipsisVertical.svelte';
 	import Thread from './Thread.svelte';
 	import i18n from '$lib/i18n';
+	import Spinner from '../common/Spinner.svelte';
 
 	export let id = '';
 
@@ -289,8 +290,8 @@
 				}}
 			/>
 
+			{#if channel && messages !== null}
 				<div class="flex-1 overflow-y-auto">
-				{#if channel}
 					<div
 						class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
 						id="messages-container"
@@ -330,7 +331,6 @@
 							/>
 						{/key}
 					</div>
-				{/if}
 				</div>
 
 				<div class=" pb-[1rem] px-2.5">
@@ -351,6 +351,13 @@
 						{scrollEnd}
 					/>
 				</div>
+			{:else}
+				<div class=" flex items-center justify-center h-full w-full">
+					<div class="m-auto">
+						<Spinner className="size-5" />
+					</div>
+				</div>
+			{/if}
 		</Pane>
 
 		{#if !largeScreen}

src/lib/components/channel/Navbar.svelte

@@ -117,6 +117,7 @@
 			</div>
 
 			<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1">
+				{#if channel}
 					<Tooltip content={$i18n.t('Pinned Messages')}>
 						<button
 							class=" flex cursor-pointer py-1.5 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
@@ -152,6 +153,7 @@
 							</button>
 						</Tooltip>
 					{/if}
+				{/if}
 
 				{#if $user !== undefined}
 					<UserMenu