From 7f56a3537cced373e88e9320398e5a604023953d Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Sun, 27 Mar 2022 19:56:56 +0000
Subject: [PATCH] fix: load the list tasks only after the list itself was
 loaded (#1251)

Currently, when opening a list sometimes the tasks are shown before the list itself is loaded. Because the list contains the rights, this means no edit buttons etc are available at that point which is pretty confusing.

This PR ensures the list-specific view is loaded only after the list itself is loaded.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1251
---
 src/components/home/contentAuth.vue |  5 +++++
 src/views/list/ListWrapper.vue      | 23 ++++++++++++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 8bf71c72c..d6883635d 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -236,6 +236,11 @@ store.dispatch('labels/loadAllLabels')
   .app-content {
     padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
 
+	// Used to make sure the spinner is always in the middle while loading
+	> .loader-container {
+      min-height: calc(100vh -  #{$navbar-height + 1.5rem + 1rem});
+	}
+
     @media screen and (max-width: $tablet) {
       margin-left: 0;
       padding-top: 1.5rem;
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 9b3911a7c..b1cb68ba6 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -42,12 +42,12 @@
 			</Message>
 		</transition>
 
-		<slot />
+		<slot v-if="loadedListId"/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref, shallowRef, computed, watchEffect} from 'vue'
+import {ref, computed, watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
@@ -55,12 +55,12 @@ import Message from '@/components/misc/message.vue'
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 
-import {store} from '@/store'
-import {CURRENT_LIST} from '@/store/mutation-types'
+import {BACKGROUND, CURRENT_LIST} from '@/store/mutation-types'
 
 import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
-import { useTitle } from '@/composables/useTitle'
+import {useTitle} from '@/composables/useTitle'
+import {useStore} from 'vuex'
 
 const props = defineProps({
 	listId: {
@@ -74,8 +74,9 @@ const props = defineProps({
 })
 
 const route = useRoute()
+const store = useStore()
 
-const listService = shallowRef(new ListService())
+const listService = ref(new ListService())
 const loadedListId = ref(0)
 
 const currentList = computed(() => {
@@ -87,7 +88,7 @@ const currentList = computed(() => {
 	} : store.state.currentList
 })
 
-// call again the method if the listId changes
+// call the method again if the listId changes
 watchEffect(() => loadList(props.listId))
 
 useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
@@ -123,6 +124,14 @@ async function loadList(listIdToLoad: number) {
 
 	console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
 
+	// Put set the current list to the one we're about to load so that the title is already shown at the top
+	loadedListId.value = 0
+	const listFromStore = store.getters['lists/getListById'](listData.id)
+	if (listFromStore !== null) {
+		store.commit(BACKGROUND, null)
+		store.commit(CURRENT_LIST, listFromStore)
+	}
+
 	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
 	const list = new ListModel(listData)
 	try {