diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index 378bd9d96f..4e3844409b 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/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 @@
 				}}
 			/>
 
-			<div class="flex-1 overflow-y-auto">
-				{#if channel}
+			{#if channel && messages !== null}
+				<div class="flex-1 overflow-y-auto">
 					<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,27 +331,33 @@
 							/>
 						{/key}
 					</div>
-				{/if}
-			</div>
+				</div>
 
-			<div class=" pb-[1rem] px-2.5">
-				<MessageInput
-					id="root"
-					bind:chatInputElement
-					bind:replyToMessage
-					{typingUsers}
-					userSuggestions={true}
-					channelSuggestions={true}
-					disabled={!channel?.write_access}
-					placeholder={!channel?.write_access
-						? $i18n.t('You do not have permission to send messages in this channel.')
-						: $i18n.t('Type here...')}
-					{onChange}
-					onSubmit={submitHandler}
-					{scrollToBottom}
-					{scrollEnd}
-				/>
-			</div>
+				<div class=" pb-[1rem] px-2.5">
+					<MessageInput
+						id="root"
+						bind:chatInputElement
+						bind:replyToMessage
+						{typingUsers}
+						userSuggestions={true}
+						channelSuggestions={true}
+						disabled={!channel?.write_access}
+						placeholder={!channel?.write_access
+							? $i18n.t('You do not have permission to send messages in this channel.')
+							: $i18n.t('Type here...')}
+						{onChange}
+						onSubmit={submitHandler}
+						{scrollToBottom}
+						{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}
diff --git a/src/lib/components/channel/Navbar.svelte b/src/lib/components/channel/Navbar.svelte
index 995b496601..936718b200 100644
--- a/src/lib/components/channel/Navbar.svelte
+++ b/src/lib/components/channel/Navbar.svelte
@@ -117,40 +117,42 @@
 			</div>
 
 			<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1">
-				<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"
-						aria-label="Pinned Messages"
-						type="button"
-						on:click={() => {
-							showChannelPinnedMessagesModal = true;
-						}}
-					>
-						<div class=" flex items-center gap-0.5 m-auto self-center">
-							<Pin className=" size-4" strokeWidth="1.5" />
-						</div>
-					</button>
-				</Tooltip>
-
-				{#if channel?.user_count !== undefined}
-					<Tooltip content={$i18n.t('Users')}>
+				{#if channel}
+					<Tooltip content={$i18n.t('Pinned Messages')}>
 						<button
-							class=" flex cursor-pointer py-1 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"
-							aria-label="User Count"
+							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"
+							aria-label="Pinned Messages"
 							type="button"
 							on:click={() => {
-								showChannelInfoModal = true;
+								showChannelPinnedMessagesModal = true;
 							}}
 						>
 							<div class=" flex items-center gap-0.5 m-auto self-center">
-								<UserAlt className=" size-4" strokeWidth="1.5" />
-
-								<div class="text-sm">
-									{channel.user_count}
-								</div>
+								<Pin className=" size-4" strokeWidth="1.5" />
 							</div>
 						</button>
 					</Tooltip>
+
+					{#if channel?.user_count !== undefined}
+						<Tooltip content={$i18n.t('Users')}>
+							<button
+								class=" flex cursor-pointer py-1 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"
+								aria-label="User Count"
+								type="button"
+								on:click={() => {
+									showChannelInfoModal = true;
+								}}
+							>
+								<div class=" flex items-center gap-0.5 m-auto self-center">
+									<UserAlt className=" size-4" strokeWidth="1.5" />
+
+									<div class="text-sm">
+										{channel.user_count}
+									</div>
+								</div>
+							</button>
+						</Tooltip>
+					{/if}
 				{/if}
 
 				{#if $user !== undefined}