diff --git a/layouts/client.vue b/layouts/client.vue
index b0fbf02..ae749e3 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,5 +1,6 @@
 <template>
-	<div id="client-root">
+	<Loading v-show="loading" />
+	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
 				main bar
@@ -21,6 +22,8 @@
 
 <script lang="ts" setup>
 
+const loading = useState("loading", () => false);
+
 const servers = [
 	{
 		name: "Test",
@@ -95,6 +98,16 @@ function sendMessage(e: Event) {
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
+	
+}
+
+.hidden {
+	opacity: 0%;
+}
+
+.visible {
+	opacity: 100%;
+	transition-duration: 500ms;
 }
 
 #homebar {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index efa2858..c122043 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -39,25 +39,20 @@
 
 const route = useRoute();
 
-const server: GuildResponse | undefined = await fetchWithApi(`servers/${route.params.serverId}`);
-
-const channels: ChannelResponse[] | undefined = await fetchWithApi(
-	`servers/${route.params.serverId}/channels`
-);
-const channel: ChannelResponse | undefined = await fetchWithApi(
-	route.path
-);
+const loading = useState("loading");
 
 const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
 
-console.log("channel:", channel);
+const server = ref<GuildResponse | undefined>();
+const channels = ref<ChannelResponse[] | undefined>();
+const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
 import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("servers:", servers);
+//console.log("channelid: servers:", servers);
 const members = [
 	{
 		id: "3287484395",
@@ -106,6 +101,24 @@ const members = [
 	}
 ];
 
+onMounted(async () => {
+	loading.value = true;
+	console.log("channelid: set loading to true");
+	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
+
+	channels.value = await fetchWithApi(
+		`servers/${route.params.serverId}/channels`
+	);
+	channel.value = await fetchWithApi(
+		route.path
+	);
+
+	console.log("channelid: channel:", channel);
+	await sleep(3000);
+	loading.value = false;
+	console.log("channelid: set loading to false");
+});
+
 function showServerSettings() { }
 
 function toggleInvitePopup(e: Event) {