Move store loading to router

src/App.vue

@@ -14,11 +14,13 @@ import {
 } from 'vue'
 import debounce from 'lodash/debounce'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
 
 import NcContent from '@nextcloud/vue/components/NcContent'
 
 // import UserSettingsDlg from './components/Settings/UserSettingsDlg.vue'
 
+import LoadingOverlay from './components/Base/modules/LoadingOverlay.vue'
 import { usePollWatcher } from './composables/usePollWatcher'
 
 import { useSessionStore } from './stores/session'
@@ -86,7 +88,10 @@ function transitionsOff(delay: number) {
 	}
 }
 
-const debouncedNotify = debounce(async function (payload: { store: string; message: string }) {
+const debouncedNotify = debounce(async function (payload: {
+	store: string
+	message: string
+}) {
 	if (payload.store === 'poll') {
 		showSuccess(payload.message)
 	}
@@ -123,6 +128,10 @@ onUnmounted(() => {
 		<router-view />
 		<router-view v-if="useSidebar" name="sidebar" />
 		<UserSettingsDlg />
+		<LoadingOverlay
+			:show="sessionStore.navigationStatus === 'loading'"
+			:name="t('polls', 'Loading…')"
+			teleport-to="#content" />
 	</NcContent>
 </template>
 

src/router.ts

@@ -14,10 +14,17 @@ import { generateUrl } from '@nextcloud/router'
 import { getCookieValue, setCookie } from './helpers/modules/cookieHelper'
 import { Logger } from './helpers/modules/logger'
 import { loadContext } from './composables/context'
+import { emit } from '@nextcloud/event-bus'
+import { Event } from './Types'
 
 import Navigation from './views/Navigation.vue'
 
 import { useSessionStore } from './stores/session'
+import { usePollStore } from './stores/poll'
+import { usePollsStore } from './stores/polls'
+import { useVotesStore } from './stores/votes'
+import { useOptionsStore } from './stores/options'
+import { useSubscriptionStore } from './stores/subscription'
 
 async function validateToken(to: RouteLocationNormalized) {
 	const sessionStore = useSessionStore()
@@ -199,6 +206,20 @@ const router = createRouter({
 router.beforeEach(
 	async (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
 		const sessionStore = useSessionStore()
+		const pollStore = usePollStore()
+		const votesStore = useVotesStore()
+		const optionsStore = useOptionsStore()
+		const subscriptionStore = useSubscriptionStore()
+
+		sessionStore.navigationStatus = 'loading'
+		emit(Event.TransitionsOff, 0)
+
+		if (from.meta.votePage) {
+			pollStore.$reset()
+			votesStore.$reset()
+			optionsStore.$reset()
+			subscriptionStore.$reset()
+		}
 
 		// if the previous and the requested routes have the same name and
 		// the watcher is active, we can do a cheap loading
@@ -227,4 +248,41 @@ router.beforeEach(
 	},
 )
 
+router.beforeResolve(async (to: RouteLocationNormalized) => {
+	const sessionStore = useSessionStore()
+	const watcherActive =
+		sessionStore.watcher.mode !== 'noPolling'
+		&& sessionStore.watcher.status !== 'stopped'
+
+	if (to.meta.listPage) {
+		const pollsStore = usePollsStore()
+		await pollsStore.load(!watcherActive)
+	}
+
+	if (to.meta.votePage) {
+		const pollStore = usePollStore()
+		const votesStore = useVotesStore()
+		const optionsStore = useOptionsStore()
+		const subscriptionStore = useSubscriptionStore()
+
+		try {
+			await pollStore.load()
+		} catch {
+			return { name: 'notfound' }
+		}
+
+		await Promise.allSettled([
+			votesStore.load(),
+			optionsStore.load(),
+			subscriptionStore.load(),
+		])
+	}
+})
+
+router.afterEach(() => {
+	const sessionStore = useSessionStore()
+	sessionStore.navigationStatus = 'idle'
+	emit(Event.TransitionsOn, null)
+})
+
 export { router }

src/stores/session.ts

@@ -114,6 +114,7 @@ export const useSessionStore = defineStore('session', {
 		token: null,
 		currentUser: defaultUser,
 		share: defaultShare,
+		navigationStatus: 'idle',
 	}),
 
 	getters: {

src/stores/session.types.ts

@@ -75,4 +75,6 @@ export type Session = {
 	watcher: Watcher
 }
 
-export type SessionStore = Session
+export type SessionStore = Session & {
+	navigationStatus: 'idle' | 'loading'
+}

src/views/PollList.vue

@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 import { showError } from '@nextcloud/dialogs'
@@ -121,10 +121,6 @@ async function loadMore() {
 		showError(t('polls', 'Error loading more polls'))
 	}
 }
-
-onMounted(() => {
-	pollsStore.load(false)
-})
 </script>
 
 <template>

src/views/Vote.vue

@@ -4,8 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -36,18 +35,13 @@ import { usePollStore } from '../stores/poll'
 import { useOptionsStore } from '../stores/options'
 import { usePreferencesStore } from '../stores/preferences'
 import { useVotesStore } from '../stores/votes'
-import { useSubscriptionStore } from '../stores/subscription'
-
 import type { CollapsibleProps } from '../components/Base/modules/Collapsible.vue'
 import { Event } from '../Types'
-import { loadContext } from '../composables/context'
 
-const router = useRouter()
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const preferencesStore = usePreferencesStore()
 const votesStore = useVotesStore()
-const subscriptionStore = useSubscriptionStore()
 
 const voteMainId = 'vote-view'
 const topObserverVisible = ref(false)
@@ -139,56 +133,10 @@ const showBottomObserver = computed(
 		&& pollStore.viewMode === 'table-view',
 )
 
-async function loadPoll(isChanging: boolean = false) {
-	try {
-		await pollStore.load(isChanging)
-	} catch {
-		votesStore.$reset()
-		optionsStore.$reset()
-		subscriptionStore.$reset()
-		router.replace({ name: 'notfound' })
-		return
-	}
-
-	const results = await Promise.allSettled([
-		votesStore.load(),
-		optionsStore.load(),
-		subscriptionStore.load(),
-	])
-
-	if (results.some((result) => result.status === 'rejected')) {
-		showError(t('polls', 'Error loading poll data'))
-	}
-}
-
-async function resetPoll() {
-	pollStore.$reset()
-	votesStore.$reset()
-	optionsStore.$reset()
-	subscriptionStore.$reset()
-}
-
-onBeforeRouteUpdate(async (to, from) => {
-	if (to.name === 'publicVote' && to.params.token !== from.params.token) {
-		loadContext(to)
-		// Same poll, no need to reload
-	}
-	loadPoll(true)
-})
-
-onBeforeRouteLeave(() => {
-	resetPoll()
-})
-
 onMounted(() => {
-	loadPoll(true)
 	emit(Event.TransitionsOff, 500)
 })
 
-onUnmounted(() => {
-	resetPoll()
-})
-
 watch(
 	[
 		() => pollStore.permissions.seeUsernames,