gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: add loading on client layout

Browse source
This commit is contained in:
SauceyRed 2025-05-29 02:36:10 +02:00
parent a324cc9300
commit 3b1581d950
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 37 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

15
layouts/client.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div id="client-root"> <Loading v-show="loading" />
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
<div id="homebar"> <div id="homebar">
<div class="homebar-item"> <div class="homebar-item">
main bar main bar
@ -21,6 +22,8 @@
<script lang="ts" setup> <script lang="ts" setup>
const loading = useState("loading", () => false);
const servers = [ const servers = [
{ {
name: "Test", name: "Test",
@ -95,6 +98,16 @@ function sendMessage(e: Event) {
grid-template-columns: 1fr 4fr 18fr 4fr; grid-template-columns: 1fr 4fr 18fr 4fr;
grid-template-rows: 4dvh auto; grid-template-rows: 4dvh auto;
text-align: center; text-align: center;
}
.hidden {
opacity: 0%;
}
.visible {
opacity: 100%;
transition-duration: 500ms;
} }
#homebar { #homebar {

33
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -39,25 +39,20 @@
const route = useRoute(); const route = useRoute();
const server: GuildResponse | undefined = await fetchWithApi(`servers/${route.params.serverId}`); const loading = useState("loading");
const channels: ChannelResponse[] | undefined = await fetchWithApi(
`servers/${route.params.serverId}/channels`
);
const channel: ChannelResponse | undefined = await fetchWithApi(
route.path
);
const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`; 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); const showInvitePopup = ref(false);
import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces"; import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[]; //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
//console.log("servers:", servers); //console.log("channelid: servers:", servers);
const members = [ const members = [
{ {
id: "3287484395", 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 showServerSettings() { }
function toggleInvitePopup(e: Event) { function toggleInvitePopup(e: Event) {