From ecb5648157e0768db143093c5d4ac70765ca5fc2 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Mon, 17 Jul 2023 11:53:08 +0200
Subject: [PATCH] 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 <jonas@freesources.org>
---
 src/components/Collective.vue      | 10 +++++-----
 src/components/Page.vue            |  5 +++--
 src/components/Page/TextEditor.vue |  2 --
 src/components/PageList.vue        |  4 ++--
 src/mixins/pageMixin.js            |  8 ++++----
 src/store/circles.js               |  2 +-
 src/store/pages.js                 |  6 ------
 7 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/Collective.vue b/src/components/Collective.vue
index 4c57fdcef..cbb4a3b38 100644
--- a/src/components/Collective.vue
+++ b/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)
 		},
diff --git a/src/components/Page.vue b/src/components/Page.vue
index 6c41d5380..77efed932 100644
--- a/src/components/Page.vue
+++ b/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'))
diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
index 5884588c2..bb2ca6c8e 100644
--- a/src/components/Page/TextEditor.vue
+++ b/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,
 		}),
 
diff --git a/src/components/PageList.vue b/src/components/PageList.vue
index cba561cfd..6fc0134fa 100644
--- a/src/components/PageList.vue
+++ b/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"
diff --git a/src/mixins/pageMixin.js b/src/mixins/pageMixin.js
index d9e245a8e..514f9811f 100644
--- a/src/mixins/pageMixin.js
+++ b/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
diff --git a/src/store/circles.js b/src/store/circles.js
index 420e60305..37f54cf88 100644
--- a/src/store/circles.js
+++ b/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)
diff --git a/src/store/pages.js b/src/store/pages.js
index cdbd64dbf..07aeb7ce7 100644
--- a/src/store/pages.js
+++ b/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')
 		},
 
 		/**