Merge pull request #3444 from nextcloud/fix/add-visual-feedback-loadi…

…ng-master

fix: Add visual loading feedback for polls list

src/js/store/modules/polls.js

@@ -32,6 +32,7 @@ const state = {
 	isPollCreationAllowed: false,
 	isComboAllowed: false,
 	currentCategoryId: 'all',
+	pollsLoading: false,
 	sort: {
 		by: 'created',
 		reverse: true,
@@ -141,6 +142,10 @@ const mutations = {
 		Object.assign(state, payload)
 	},
 
+	setLoading(state, loading) {
+		state.pollsLoading = loading ?? true
+	},
+
 	setFilter(state, payload) {
 		state.currentCategoryId = payload.currentCategoryId
 	},
@@ -195,6 +200,7 @@ const actions = {
 	async list(context) {
 
 		try {
+			context.commit('setLoading')
 			const response = await PollsAPI.getPolls()
 			context.commit('set', { list: response.data.list })
 			context.commit('setPollCreationAllowed', { pollCreationAllowed: response.data.pollCreationAllowed })
@@ -203,6 +209,8 @@ const actions = {
 			if (e?.code === 'ERR_CANCELED') return
 			console.error('Error loading polls', { error: e.response })
 			throw e
+		} finally {
+			context.commit('setLoading', false)
 		}
 	},
 }

src/js/views/PollList.vue

@@ -30,16 +30,20 @@
 		</HeaderBar>
 
 		<div class="area__main">
-			<NcEmptyContent v-if="noPolls"
+			<NcEmptyContent v-if="noPolls && isLoading"
+				:name="t('polls', 'Loading polls…')">
+				<NcLoadingIcon slot="icon" :size="64" />
+			</NcEmptyContent>
+			<NcEmptyContent v-else-if="noPolls"
 				:name="t('polls', 'No polls found for this category')"
 				:description="t('polls', 'Add one or change category!')">
 				<template #icon>
 					<PollsAppIcon />
 				</template>
 			</NcEmptyContent>
 
-			<TransitionGroup is="div"
-				v-else
+			<TransitionGroup v-else
+				tag="div"
 				name="list"
 				class="poll-list__list">
 				<PollItem key="0"
@@ -94,14 +98,13 @@
 				</PollItem>
 			</TransitionGroup>
 		</div>
-		<LoadingOverlay v-if="isLoading" />
 	</NcAppContent>
 </template>
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { NcActions, NcActionButton, NcAppContent, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { HeaderBar } from '../components/Base/index.js'
 import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
 import ClonePollIcon from 'vue-material-design-icons/ContentCopy.vue'
@@ -117,26 +120,21 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcEmptyContent,
+		NcLoadingIcon,
 		HeaderBar,
 		DeletePollIcon,
 		ClonePollIcon,
 		ArchivePollIcon,
 		RestorePollIcon,
 		PollsAppIcon,
-		LoadingOverlay: () => import('../components/Base/modules/LoadingOverlay.vue'),
 		PollItem: () => import('../components/PollList/PollItem.vue'),
 	},
 
-	data() {
-		return {
-			isLoading: false,
-		}
-	},
-
 	computed: {
 		...mapState({
 			pollCategories: (state) => state.polls.categories,
 			isPollCreationAllowed: (state) => state.polls.isPollCreationAllowed,
+			isLoading: (state) => state.polls.pollsLoading,
 		}),
 
 		...mapGetters({