improve loading performance and use loading skeleton

probablyjassin · Nov 12, 2024 · 68ab9bd · 68ab9bd
1 parent af05db4
commit 68ab9bd
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 48 deletions.
diff --git a/app.vue b/app.vue
@@ -6,26 +6,30 @@
 </template>
 
 <script setup>
-	definePageMeta({
-		title: "Stundenplan",
-		description: "Einfache, mobile-first WebApp für den CampusDual-Stundenplan. Support für Firefox und Chromium.",
-	});
+const links = [
+	{
+		label: "Home",
+		icon: "i-heroicons-home",
+		to: "/",
+	},
+	{
+		label: "Stundenplan",
+		icon: "i-heroicons-clock",
+		to: "/stundenplan",
+	},
+	{
+		label: "Wie finde ich mein Passwort (Hash)?",
+		icon: "i-heroicons-document-text",
+		to: "/hash",
+	},
+];
 
-	const links = [
-		{
-			label: "Home",
-			icon: "i-heroicons-home",
-			to: "/",
-		},
-		{
-			label: "Stundenplan",
-			icon: "i-heroicons-clock",
-			to: "/stundenplan",
-		},
-		{
-			label: "Wie finde ich mein Passwort (Hash)?",
-			icon: "i-heroicons-document-text",
-			to: "/hash",
-		},
-	];
+const username = useCookie("username")
+const password = useCookie("password")
+const isLoggedIn = useState("isLoggedIn", (() => false))
+
+const test_url = `https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Fdash%2Fgetcp%3Fuser%3D${username.value}%26hash%3D${password.value}`
+const response = await $fetch(test_url)
+
+isLoggedIn.value = !!(response == 0)
 </script>
diff --git a/middleware/isLoggedIn.global.ts b/middleware/isLoggedIn.global.ts
@@ -3,14 +3,8 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	if (to.fullPath !== "/stundenplan") {
 		return true
 	}
-	const username = useCookie("username")
-	const password = useCookie("password")
+	const isLoggedIn = useState("isLoggedIn", (() => false) as () => boolean)
 
-	const test_url = `https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Fdash%2Fgetcp%3Fuser%3D${username.value}%26hash%3D${password.value}`
-	const response = await $fetch(test_url)
-
-	if (response == 0) {
-		return true
-	}
+	if (isLoggedIn.value) return true
 	return navigateTo("/login")
 })
diff --git a/pages/stundenplan.vue b/pages/stundenplan.vue
@@ -1,15 +1,23 @@
 <template>
-	<ClientOnly>
-		<div class="container mx-auto p-4">
-			<p class="text-3xl font-bold mb-4">Stundenplan</p>
-			<p class="text-lg mb-4" v-show="data.length">
-				{{
-					new Date(Number(Object.keys(groupedByDay)[page - 1])).toLocaleDateString("de-DE", {
-						weekday: "long",
-						year: "numeric", month: "long", day: "numeric"
-					})
-				}}
-			</p>
+	<div class="container mx-auto p-4">
+
+		<p class="text-3xl font-bold mb-4">Stundenplan</p>
+		<p class="text-lg mb-4" v-show="data.length">
+			{{
+				new Date(Number(Object.keys(groupedByDay)[page - 1])).toLocaleDateString("de-DE", {
+					weekday: "long",
+					year: "numeric", month: "long", day: "numeric"
+				})
+			}}
+		</p>
+
+		<span v-if="!data.length" class="space-y-3">
+			<USkeleton class="mb-4 h-8 w-80" :ui="{ rounded: 'rounded-xl' }" />
+			<USkeleton class="mb-4 h-8 w-80" :ui="{ rounded: 'rounded-xl' }" />
+			<USkeleton class="mb-4 h-64 w-full" :ui="{ rounded: 'rounded-xl' }" />
+		</span>
+		<ClientOnly v-else>
+
 			<span class="mb-4 flex text-center items-center space-x-4">
 				<UPagination v-model="page" :total="data.length" />
 				<UButton v-if="Object.keys(groupedByDay).indexOf(today.toString()) !== -1"
@@ -18,21 +26,32 @@
 					Zurück zu Heute
 				</UButton>
 			</span>
-			<UTable :rows="schedule[page - 1]" class="w-full" :loading="!hasLoaded"
-				:loading-state="{ label: 'Laden...' }" />
-			<button @click="logout()" class="mt-5 p-2 bg-primary text-white rounded">Anmeldedaten zurücksetzen</button>
-		</div>
-	</ClientOnly>
+
+			<UTable :rows="schedule[page - 1]" :loading="!hasLoaded" :loading-state="{ label: 'Laden...' }"
+				class="w-full" />
+
+		</ClientOnly>
+
+		<button @click="logout()" class="mt-5 p-2 bg-primary text-white rounded">
+			Anmeldedaten zurücksetzen
+		</button>
+
+	</div>
 </template>
 
 <script setup>
-
-const localData = ref([]);
+definePageMeta({
+	keepalive: true,
+	key: route => route.fullPath,
+})
 
 const router = useRouter();
 
+const localData = ref([]);
+
 const username = useCookie("username");
 const password = useCookie("password");
+const isLoggedIn = useState("isLoggedIn", (() => false))
 
 const today = new Date().setHours(0, 0, 0, 0);
 const page = ref(1);
@@ -89,7 +108,6 @@ onMounted(async () => {
 	const storedValue = localStorage.getItem('stundenplan');
 	localData.value = storedValue ? JSON.parse(storedValue) : []
 
-	console.log(localData.value.length);
 	if (localData.value.length !== 0) {
 		data.value = localData.value;
 	}
@@ -115,6 +133,7 @@ onMounted(async () => {
 function logout() {
 	username.value = "";
 	password.value = "";
+	isLoggedIn.value = false;
 	router.push("/login");
 }
 </script>