ami/tl-vikunja
1
0
Fork 0
Code

feat: wrap projects navigation in a <Suspense> so that we can use top level await

Browse Source
This commit is contained in:
kolaente 2023-03-28 16:18:53 +02:00
parent 6f1baa3219
commit 2579c33ee1
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
3 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/home/ProjectsNavigationWrapper.vue Normal file
View File

@ -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>

7
src/components/home/contentAuth.vue
View File

@ -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="[

48
src/components/home/navigation.vue
View File

@ -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>