refactor(vuex): refactor loading states for collective and pagelist

Aim to only show loading indicators when content is loaded for the
first time, to be less disruptive.

Signed-off-by: Jonas <[email protected]>

src/components/Collective.vue

@@ -1,8 +1,8 @@
 <template>
 	<NcAppContentDetails>
-		<Version v-if="currentPage && version" />
-		<Page v-else-if="currentPage && !loading('collective')" />
-		<SkeletonLoading v-else-if="loading('collective') || loading('page')" :count="1" type="page-heading" />
+		<SkeletonLoading v-if="loading('collective') || loading('currentPage')" :count="1" type="page-heading" />
+		<Version v-else-if="currentPage && version" />
+		<Page v-else-if="currentPage" />
 		<PageNotFound v-else />
 	</NcAppContentDetails>
 </template>
@@ -57,7 +57,7 @@ export default {
 		]),
 
 		notFound() {
-			return !this.loading('collective') && !this.loading('pagelist') && !this.currentPage
+			return !this.loading('collective') && !this.currentPage
 		},
 	},
 
@@ -125,7 +125,7 @@ export default {
 		},
 
 		handleNetworkOnline() {
-			this.getPages()
+			this.getPagesBackground()
 			console.debug('Network is online.')
 			this._setPollingInterval(this.pollIntervalBase)
 		},

src/components/Page.vue

@@ -119,7 +119,7 @@ import TextEditor from './Page/TextEditor.vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import pageMixin from '../mixins/pageMixin.js'
 import { showError } from '@nextcloud/dialogs'
-import { RENAME_PAGE } from '../store/actions.js'
+import { GET_PAGES, RENAME_PAGE } from '../store/actions.js'
 
 export default {
 	name: 'Page',
@@ -243,6 +243,7 @@ export default {
 		]),
 
 		...mapActions({
+			dispatchGetPages: GET_PAGES,
 			dispatchRenamePage: RENAME_PAGE,
 		}),
 
@@ -286,7 +287,7 @@ export default {
 				await this.dispatchRenamePage(this.newTitle)
 				// The resulting title may be different due to sanitizing
 				this.newTitle = this.currentPage.title
-				this.dispatchGetPages()
+				this.dispatchGetPages(false)
 			} catch (e) {
 				console.error(e)
 				showError(t('collectives', 'Could not rename the page'))

src/components/Page/TextEditor.vue

@@ -22,7 +22,6 @@ import Editor from './Editor.vue'
 import RichText from './RichText.vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import {
-	GET_PAGES,
 	GET_VERSIONS,
 	TOUCH_PAGE,
 } from '../../store/actions.js'
@@ -126,7 +125,6 @@ export default {
 
 		...mapActions({
 			dispatchTouchPage: TOUCH_PAGE,
-			dispatchGetPages: GET_PAGES,
 			dispatchGetVersions: GET_VERSIONS,
 		}),
 

src/components/PageList.vue

@@ -53,10 +53,10 @@
 				</NcActionButton>
 			</NcActions>
 		</div>
-		<div v-if="loading('collective') || loading('pagelist')" class="page-list">
+		<div v-if="!currentCollective || !collectivePage || loading('collective')" class="page-list">
 			<SkeletonLoading type="items" :count="3" />
 		</div>
-		<div v-if="!loading('collective') && currentCollective && collectivePage" class="page-list">
+		<div v-else class="page-list">
 			<Item key="Readme"
 				:to="currentCollectivePath"
 				:page-id="collectivePage.id"

src/mixins/pageMixin.js

@@ -73,7 +73,7 @@ export default {
 				}
 
 				// Parents location changes when the first subpage is created.
-				this.dispatchGetPages()
+				this.dispatchGetPages(false)
 			} catch (e) {
 				console.error(e)
 				showError(t('collectives', 'Could not create the page'))
@@ -97,7 +97,7 @@ export default {
 				this.$nextTick(() => scrollToPage(this.newPageId))
 
 				// Parents location changes when the first subpage is created.
-				this.dispatchGetPages()
+				this.dispatchGetPages(false)
 			} catch (e) {
 				console.error(e)
 				showError(t('collectives', 'Could not create the page'))
@@ -139,14 +139,14 @@ export default {
 
 			// Move subpage to new parent
 			try {
-				this.load('page')
+				this.load('currentPage')
 				await this.dispatchMovePage({ newParentId, pageId, index: newIndex })
 			} catch (e) {
 				console.error(e)
 				showError(t('collectives', 'Could not move page'))
 				return
 			} finally {
-				this.done('page')
+				this.done('currentPage')
 			}
 
 			// Redirect to new page path if currentPage got moved

src/store/circles.js

@@ -80,7 +80,7 @@ export default {
 
 			if (collective.id === getters.currentCollective?.id) {
 				// Update page list, properties like `collectivePath` might have changed
-				await dispatch(GET_PAGES)
+				await dispatch(GET_PAGES, false)
 				await dispatch(GET_TRASH_PAGES)
 			}
 			commit(PATCH_COLLECTIVE_WITH_CIRCLE, response.data.ocs.data)

src/store/pages.js

@@ -506,10 +506,8 @@ export default {
 		 * @param {number} pageId Page ID
 		 */
 		async [GET_PAGE]({ commit, getters, state }, { parentId, pageId }) {
-			commit('load', 'page')
 			const response = await axios.get(getters.pageUrl(parentId, pageId))
 			commit(UPDATE_PAGE, response.data.data)
-			commit('done', 'page')
 		},
 
 		/**
@@ -572,12 +570,10 @@ export default {
 		 * @param {string} newTitle new title for the page
 		 */
 		async [RENAME_PAGE]({ commit, getters }, newTitle) {
-			commit('load', 'page')
 			const page = getters.currentPage
 			const url = getters.pageUrl(page.parentId, page.id)
 			const response = await axios.put(url, { title: newTitle })
 			await commit(UPDATE_PAGE, response.data.data)
-			commit('done', 'page')
 		},
 
 		/**
@@ -693,10 +689,8 @@ export default {
 		 * @param {number} page.pageId ID of the page
 		 */
 		async [TRASH_PAGE]({ commit, getters }, { parentId, pageId }) {
-			commit('load', 'page')
 			const response = await axios.delete(getters.pageUrl(parentId, pageId))
 			commit(MOVE_PAGE_INTO_TRASH, response.data.data)
-			commit('done', 'page')
 		},
 
 		/**