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;

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 {