From b1cb26d423229e00f54cd014c9e35e5d1a4292a1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 28 Mar 2023 16:18:53 +0200
Subject: [PATCH] feat: wrap projects navigation in a <Suspense> so that we can
 use top level await

---
 .../home/ProjectsNavigationWrapper.vue        | 36 ++++++++++++++
 src/components/home/contentAuth.vue           |  7 ++-
 src/components/home/navigation.vue            | 48 ++++++++-----------
 3 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 src/components/home/ProjectsNavigationWrapper.vue

diff --git a/src/components/home/ProjectsNavigationWrapper.vue b/src/components/home/ProjectsNavigationWrapper.vue
new file mode 100644
index 000000000..d876ae115
--- /dev/null
+++ b/src/components/home/ProjectsNavigationWrapper.vue
@@ -0,0 +1,36 @@
+<template>
+	<nav class="menu" v-if="favoriteProjects">
+		<ProjectsNavigation v-model="favoriteProjects" :can-edit-order="false"/>
+	</nav>
+
+	<nav class="menu">
+		<ProjectsNavigation v-model="projects" :can-edit-order="true"/>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {useProjectStore} from '@/stores/projects'
+import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
+
+const projectStore = useProjectStore()
+
+await projectStore.loadProjects()
+
+const projects = computed(() => projectStore.projectsArray
+	.filter(p => p.parentProjectId === 0 && !p.isArchived)
+	.sort((a, b) => a.position - b.position))
+const favoriteProjects = computed(() => projectStore.projectsArray
+	.filter(p => !p.isArchived && p.isFavorite)
+	.map(p => ({
+		...p,
+		childProjects: [],
+	}))
+	.sort((a, b) => a.position - b.position))
+</script>
+
+<style lang="scss" scoped>
+.menu {
+	padding-top: math.div($navbar-padding, 2);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 5f5bb2799..06fcdfaba 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -16,7 +16,12 @@
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
 				:style="{'background-image': background && `url(${background})`}"></div>
-			<navigation class="d-print-none"/>
+			<Suspense>
+				<navigation class="d-print-none"/>
+				<template #fallback>
+					Loading...
+				</template>
+			</Suspense>
 			<main
 				class="app-content"
 				:class="[
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 05ca70592..df6b38c6d 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -48,47 +48,30 @@
 			</ul>
 		</nav>
 
-		<nav class="menu" v-if="favoriteProjects">
-			<ProjectsNavigation v-model="favoriteProjects" :can-edit-order="false"/>
-		</nav>
+		<Suspense>
+			<ProjectsNavigationWrapper/>
 
-		<nav class="menu">
-			<ProjectsNavigation v-model="projects" :can-edit-order="true"/>
-		</nav>
+			<template #fallback>
+				<Loading/>
+			</template>
+		</Suspense>
 
 		<PoweredByLink/>
 	</aside>
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeMount} from 'vue'
+import {computed} from 'vue'
 
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
+import Loading from '@/components/misc/loading.vue'
 
 import {useBaseStore} from '@/stores/base'
-import {useProjectStore} from '@/stores/projects'
-import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
+import ProjectsNavigationWrapper from '@/components/home/ProjectsNavigationWrapper.vue'
 
 const baseStore = useBaseStore()
-const projectStore = useProjectStore()
 const menuActive = computed(() => baseStore.menuActive)
-
-// FIXME: async action will be unfinished when component mounts
-onBeforeMount(async () => {
-	await projectStore.loadProjects()
-})
-
-const projects = computed(() => projectStore.projectsArray
-	.filter(p => p.parentProjectId === 0 && !p.isArchived)
-	.sort((a, b) => a.position - b.position))
-const favoriteProjects = computed(() => projectStore.projectsArray
-	.filter(p => !p.isArchived && p.isFavorite)
-	.map(p => ({
-		...p,
-		childProjects: [],
-	}))
-	.sort((a, b) => a.position - b.position))
 </script>
 
 <style lang="scss" scoped>
@@ -150,7 +133,16 @@ const favoriteProjects = computed(() => projectStore.projectsArray
 	}
 }
 
-.menu {
-	padding-top: math.div($navbar-padding, 2);
+.loader-container {
+	min-width: 100%;
+	height: 150px;
+
+	&.is-loading::after {
+		width: 3rem;
+		height: 3rem;
+		top: calc(50% - 1.5rem);
+		left: calc(50% - 1.5rem);
+		border-width: 3px;
+	}
 }
 </style>