Merge pull request #4570 from nextcloud/ref/app-performance

Performance optimizations

Author: dartcafe

src/App.vue

@@ -10,8 +10,9 @@ import {
 	defineAsyncComponent,
 	onMounted,
 	onUnmounted,
-	watchEffect,
+	watch,
 } from 'vue'
+import { useRoute } from 'vue-router'
 import debounce from 'lodash/debounce'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -39,6 +40,7 @@ import './assets/scss/globals.scss'
 
 usePollWatcher()
 
+const route = useRoute()
 const sessionStore = useSessionStore()
 const pollStore = usePollStore()
 const pollGroupsStore = usePollGroupsStore()
@@ -61,8 +63,8 @@ const useSidebar = computed(
 	() =>
 		pollStore.permissions.edit
 		|| pollStore.permissions.comment
-		|| sessionStore.route.name === 'combo'
-		|| (sessionStore.route.name === 'group'
+		|| route.meta.comboPage
+		|| (route.meta.groupPage
 			&& pollGroupsStore.currentPollGroup?.owner.id
 				=== sessionStore.currentUser.id),
 )
@@ -105,9 +107,9 @@ function onTransitionsOn() {
 	transitionsOn()
 }
 
-watchEffect(() => {
-	document.title = sessionStore.windowTitle
-})
+watch(() => sessionStore.windowTitle, (title) => {
+	document.title = title
+}, { immediate: true })
 
 onMounted(() => {
 	subscribe(Event.TransitionsOff, onTransitionsOff)

src/components/Actions/modules/ActionAddPoll.vue

@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useSessionStore } from '../../../stores/session'
@@ -35,7 +35,7 @@ const {
 const router = useRouter()
 const sessionStore = useSessionStore()
 
-const newPoll = ref({
+const newPoll = shallowRef({
 	id: 0,
 	title: '',
 })

src/components/Cards/CardLocked.vue

@@ -5,15 +5,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import CardDiv from '../Base/modules/CardDiv.vue'
 import { t } from '@nextcloud/l10n'
-import { useSessionStore } from '../../stores/session'
 
-const sessionStore = useSessionStore()
+const route = useRoute()
 const cardType = 'warning'
 
 const cardText = computed(() =>
-	sessionStore.route.name === 'publicVote'
+	route.meta.publicVotePage
 		? t(
 				'polls',
 				'This share is locked and allows only read access. Registering is not possible.',

src/components/Poll/PollHeaderButtons.vue

@@ -27,7 +27,7 @@ const ExportPoll = defineAsyncComponent(() => import('../Export/ExportPoll.vue')
 
 const showUserMenu = computed(
 	() =>
-		route.name !== 'publicVote'
+		!route.meta.publicVotePage
 		|| pollStore.permissions.vote
 		|| pollStore.permissions.subscribe,
 )

src/components/Poll/PollInformation.vue

@@ -272,7 +272,7 @@ const countUsedVotes = computed(
 		</BadgeDiv>
 		<BadgeDiv
 			v-if="
-				$route.name === 'publicVote' && sessionStore.currentUser.emailAddress
+				$route.meta.publicVotePage && sessionStore.currentUser.emailAddress
 			">
 			<template #icon>
 				<EmailIcon />

src/components/PollGroup/PollGroupEditDlg.vue

@@ -29,7 +29,7 @@ async function updatePollGroup() {
 		pollGroupsStore.updating = true
 		const pollGroup = await pollGroupsStore.writeCurrentPollGroup()
 		if (pollGroup) {
-			if (route.name === 'group' && pollGroup.slug !== route.params.slug) {
+			if (route.meta.groupPage && pollGroup.slug !== route.params.slug) {
 				// if the slug has changed, we need to reroute
 				router.push({
 					name: 'group',

src/components/PollList/PollItemActions.vue

@@ -95,7 +95,7 @@ async function removePollFromGroup(pollId: number, pollGroupId: number) {
 					'The poll group was deleted by removing the last member.',
 				),
 			)
-			if (route.name === 'group') {
+			if (route.meta.groupPage) {
 				router.push({ name: 'root' })
 			}
 		}

src/components/User/ActionInputDisplayName.vue

@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 import debounce from 'lodash/debounce'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -16,6 +17,9 @@ import { ValidatorAPI } from '../../Api'
 import { StatusResults } from '../../Types'
 import { useSessionStore } from '../../stores/session'
 
+const route = useRoute()
+const sessionStore = useSessionStore()
+
 type InputProps = {
 	success: boolean
 	error: boolean
@@ -24,8 +28,6 @@ type InputProps = {
 	label: string
 }
 
-const sessionStore = useSessionStore()
-
 const inputProps = ref<InputProps>({
 	success: false,
 	error: false,
@@ -59,7 +61,7 @@ const validatePublicUsername = debounce(async function () {
 
 	try {
 		await ValidatorAPI.validateName(
-			sessionStore.route.params.token,
+			sessionStore.publicToken,
 			sessionStore.share.user.displayName,
 		)
 		setStatus('success')
@@ -87,7 +89,7 @@ async function submit() {
 
 <template>
 	<NcActionInput
-		v-if="sessionStore.route.name === 'publicVote'"
+		v-if="route.meta.publicVotePage"
 		v-bind="inputProps"
 		v-model="sessionStore.share.user.displayName"
 		@update:value="validatePublicUsername"

src/components/User/ActionInputEmailAddress.vue

@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 import debounce from 'lodash/debounce'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -16,6 +17,8 @@ import { ValidatorAPI } from '../../Api'
 import { StatusResults } from '../../Types'
 import { useSessionStore } from '../../stores/session'
 
+const route = useRoute()
+
 type InputProps = {
 	success: boolean
 	error: boolean
@@ -88,7 +91,7 @@ async function submit() {
 
 <template>
 	<NcActionInput
-		v-if="sessionStore.route.name === 'publicVote'"
+		v-if="route.meta.publicVotePage"
 		v-bind="inputProps"
 		v-model="sessionStore.share.user.emailAddress"
 		@update:model-value="validate"

src/components/User/UserAvatar.vue

@@ -30,7 +30,7 @@ const {
 } = defineProps<Props>()
 
 const computedIsGuest = computed(
-	() => route.name === 'publicVote' || user.isNoUser !== false,
+	() => route.meta.publicVotePage || user.isNoUser !== false,
 )
 
 const avatarUserId = computed(() => {