feat: load all projects earlier than in the navigation and use the loading state of the store

src/components/home/ProjectsNavigationWrapper.vue

@@ -15,8 +15,6 @@ import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
 
 const projectStore = useProjectStore()
 
-await projectStore.loadProjects()
-
 const projects = computed(() => projectStore.notArchivedRootProjects
 	.sort((a, b) => a.position - b.position))
 const favoriteProjects = computed(() => projectStore.favoriteProjects

src/components/home/contentAuth.vue

@@ -69,6 +69,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useLabelStore} from '@/stores/labels'
+import {useProjectStore} from '@/stores/projects'
 
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
@@ -115,6 +116,9 @@ useRenewTokenOnFocus()
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
+
+const projectStore = useProjectStore()
+projectStore.loadProjects()
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -48,13 +48,8 @@
 			</ul>
 		</nav>
 
-		<Suspense>
+		<Loading variant="small" v-if="projectsLoading"/>
-			<ProjectsNavigationWrapper/>
+		<ProjectsNavigationWrapper v-else/>
-
-			<template #fallback>
-				<Loading variant="small"/>
-			</template>
-		</Suspense>
 
 		<PoweredByLink/>
 	</aside>
@@ -68,10 +63,13 @@ 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 ProjectsNavigationWrapper from '@/components/home/ProjectsNavigationWrapper.vue'
 
 const baseStore = useBaseStore()
+const projectStore = useProjectStore()
 const menuActive = computed(() => baseStore.menuActive)
+const projectsLoading = computed(() => projectStore.isLoading)
 </script>
 
 <style lang="scss" scoped>