Merge pull request #10590 from nextcloud/backport/10588/stable27

[stable27] fix(RightSidebar) - Optimize update active tab ( sharedItems)

src/components/RightSidebar/RightSidebar.vue

@@ -277,12 +277,7 @@ export default {
 				this.conversationName = this.conversation.displayName
 			}
 
-			if (newConversation.token === oldConversation.token) {
-				return
-			}
-
-			if (this.isOneToOne) {
-				this.activeTab = 'shared-items'
+			if (newConversation.token === oldConversation.token || this.isOneToOne) {
 				return
 			}
 
@@ -321,9 +316,7 @@ export default {
 			}
 
 			// In other case switch to other tabs
-			if (this.isOneToOne) {
-				this.activeTab = 'shared-items'
-			} else {
+			if (!this.isOneToOne) {
 				this.activeTab = 'participants'
 			}
 		},

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<div v-if="!loading && active">
+	<LoadingComponent v-if="loading" class="tab-loading" />
+	<div v-else>
 		<!-- Shared items grouped by type -->
 		<template v-for="type in sharedItemsOrder">
 			<div v-if="sharedItems[type]" :key="type">
@@ -89,6 +90,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcRelatedResourcesPanel from '@nextcloud/vue/dist/Components/NcRelatedResourcesPanel.js'
 
+import LoadingComponent from '../../LoadingComponent.vue'
 import SharedItems from './SharedItems.vue'
 import SharedItemsBrowser from './SharedItemsBrowser.vue'
 
@@ -107,6 +109,7 @@ export default {
 		CollectionList,
 		DotsHorizontal,
 		FolderMultipleImage,
+		LoadingComponent,
 		NcAppNavigationCaption,
 		NcButton,
 		NcEmptyContent,
@@ -164,25 +167,21 @@ export default {
 		hasSharedItems() {
 			return Object.keys(this.$store.getters.sharedItems(this.token)).length > 0
 		},
-	},
 
-	watch: {
-		active: {
-			immediate: true,
-			handler(newValue) {
-				if (newValue && this.token) {
-					this.getSharedItemsOverview()
-				}
-			},
+		isSidebarOpen() {
+			return this.$store.getters.getSidebarStatus
 		},
 
-		token: {
-			immediate: true,
-			handler(newValue) {
-				if (newValue && this.active) {
-					this.getSharedItemsOverview()
-				}
-			},
+		sharedItemsIdentifier() {
+			return this.token + ':' + this.active + ':' + this.isSidebarOpen
+		},
+	},
+
+	watch: {
+		sharedItemsIdentifier() {
+			if (this.token && this.active && this.isSidebarOpen) {
+				this.getSharedItemsOverview()
+			}
 		},
 	},
 
@@ -224,4 +223,8 @@ export default {
 		}
 	}
 }
+
+.tab-loading {
+	margin-top: 50%;
+}
 </style>