fix(sidebar): reduce initial loading size of Talk files sidebar

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/FilesSidebarTabLoader.vue

@@ -0,0 +1,80 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div ref="talkChatPreload" class="talkChatTab">
+		<div class="emptycontent ui-not-ready-placeholder">
+			<div class="icon icon-loading" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FilesSidebarTabLoader',
+
+	data() {
+		return {
+			sidebarState: OCA.Files.Sidebar.state,
+		}
+	},
+
+	computed: {
+		isChatTheActiveTab() {
+			// FIXME check for empty active tab is currently needed because the
+			// activeTab is not set when opening the sidebar from the "Details"
+			// action (which opens the first tab, which is the Chat tab).
+			return !this.sidebarState.activeTab || this.sidebarState.activeTab === 'chat'
+		},
+	},
+
+	watch: {
+		isChatTheActiveTab: {
+			immediate: true,
+			handler(value) {
+				if (value === true && OCA.Talk?.isFirstLoad === true) {
+					OCA.Talk.isFirstLoad = false
+					this.replaceAppInTab()
+				}
+			},
+		},
+	},
+
+	methods: {
+		async replaceAppInTab() {
+			try {
+				if (OCA.Files.Sidebar) {
+					const module = await import(/* webpackChunkName: "files-sidebar-main" */ './mainFilesSidebar.js')
+					module.mountSidebar(this.$refs.talkChatPreload)
+				}
+			} catch (error) {
+				console.error(error)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.talkChatTab {
+	height: 100%;
+
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.emptycontent {
+	/* Override default top margin set in server and center vertically
+	 * instead. */
+	margin-top: unset;
+
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+</style>

src/mainFilesSidebar.js

@@ -9,14 +9,13 @@ import VueObserveVisibility from 'vue-observe-visibility'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
 
-import { getRequestToken } from '@nextcloud/auth'
-import { generateFilePath } from '@nextcloud/router'
-
 import FilesSidebarCallViewApp from './FilesSidebarCallViewApp.vue'
 import FilesSidebarTabApp from './FilesSidebarTabApp.vue'
 
 import './init.js'
+import PrivateTalk from './mainFilesSidebarLoader.js'
 import store from './store/index.js'
+import FilesSidebarCallView from './views/FilesSidebarCallView.js'
 
 // Leaflet icon patch
 import 'leaflet/dist/leaflet.css'
@@ -25,17 +24,6 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
 // eslint-disable-next-line
 import 'leaflet-defaulticon-compatibility'
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
-
-// Correct the root of the app for chunk loading
-// OC.linkTo matches the apps folders
-// OC.generateUrl ensure the index.php (or not)
-// We do not want the index.php since we're loading files
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
-
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
@@ -61,12 +49,16 @@ const newTab = () => new Vue({
 	render: h => h(FilesSidebarTabApp),
 })
 
-if (!window.OCA.Talk) {
-	window.OCA.Talk = {}
-}
 Object.assign(window.OCA.Talk, {
-	fileInfo: null,
 	newCallView,
 	newTab,
 	store,
 })
+
+export const mountSidebar = (mountEl) => {
+	if (OCA.Files?.Sidebar) {
+		OCA.Files.Sidebar.registerSecondaryView(new FilesSidebarCallView())
+		PrivateTalk.tabInstance = OCA.Talk.newTab()
+		PrivateTalk.tabInstance.$mount(mountEl)
+	}
+}

src/mainFilesSidebarLoader.js

@@ -3,50 +3,83 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import './init.js'
-import FilesSidebarCallView from './views/FilesSidebarCallView.js'
+import Vue from 'vue'
+
+import { getRequestToken } from '@nextcloud/auth'
+import { generateFilePath } from '@nextcloud/router'
+
+import FilesSidebarTabLoader from './FilesSidebarTabLoader.vue'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
+
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+const loaderTab = () => new Vue({
+	id: 'talk-chat-tab',
+	render: h => h(FilesSidebarTabLoader),
+})
 
 const isEnabled = function(fileInfo) {
 	if (fileInfo && !fileInfo.isDirectory()) {
 		return true
 	}
 
-	const token = OCA.Talk.store.getters.getToken()
+	const token = OCA.Talk.store?.getters.getToken()
 
 	// If the Talk tab can not be displayed then the current conversation is
 	// left; this must be done here because "setFileInfo" will not get
 	// called with the new file if the tab can not be displayed.
 	if (token) {
-		OCA.Talk.store.dispatch('leaveConversation', { token })
+		OCA.Talk.store?.dispatch('leaveConversation', { token })
 	}
 
-	OCA.Talk.store.dispatch('updateTokenAndFileIdForToken', {
+	OCA.Talk.store?.dispatch('updateTokenAndFileIdForToken', {
 		newToken: null,
 		newFileId: null,
 	})
 
 	return false
 }
 
+if (!window.OCA.Talk) {
+	window.OCA.Talk = {}
+}
+Object.assign(window.OCA.Talk, {
+	fileInfo: null,
+	loaderTab,
+	isFirstLoad: true,
+})
+
 // It might be enough to keep the instance only in the Tab object itself,
 // without using a shared variable that can be destroyed if a new tab is
 // mounted and the previous one was not destroyed yet, as the tabs seem to
 // always be properly destroyed. However, this is how it is done for tabs in
 // server, so it is done here too just to be safe.
-let tabInstance = null
+const PrivateTalk = {
+	tabInstance: null,
+}
 
 window.addEventListener('DOMContentLoaded', () => {
 	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerSecondaryView(new FilesSidebarCallView())
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'chat',
 			name: t('spreed', 'Chat'),
 			icon: 'icon-talk',
 			enabled: isEnabled,
 
 			async mount(el, fileInfo, context) {
-				if (tabInstance) {
-					tabInstance.$destroy()
+				if (PrivateTalk.tabInstance) {
+					PrivateTalk.tabInstance.$destroy()
 				}
 
 				// Dirty hack to force the style on parent component
@@ -56,17 +89,23 @@ window.addEventListener('DOMContentLoaded', () => {
 				tabChat.style.padding = '0'
 
 				OCA.Talk.fileInfo = this.fileInfo
-				tabInstance = OCA.Talk.newTab()
-				tabInstance.$mount(el)
+				if (OCA.Talk.isFirstLoad === true) {
+					PrivateTalk.tabInstance = OCA.Talk.loaderTab()
+				} else {
+					PrivateTalk.tabInstance = OCA.Talk.newTab()
+				}
+				PrivateTalk.tabInstance.$mount(el)
 			},
 			update(fileInfo) {
 				OCA.Talk.fileInfo = fileInfo
 			},
 			destroy() {
 				OCA.Talk.fileInfo = null
-				tabInstance.$destroy()
-				tabInstance = null
+				PrivateTalk.tabInstance.$destroy()
+				PrivateTalk.tabInstance = null
 			},
 		}))
 	}
 })
+
+export default PrivateTalk

webpack.config.js

@@ -27,7 +27,6 @@ module.exports = mergeWithRules({
 		main: path.join(__dirname, 'src', 'main.js'),
 		recording: path.join(__dirname, 'src', 'mainRecording.js'),
 		'files-sidebar': [
-			path.join(__dirname, 'src', 'mainFilesSidebar.js'),
 			path.join(__dirname, 'src', 'mainFilesSidebarLoader.js'),
 		],
 		'public-share-auth-sidebar': path.join(__dirname, 'src', 'mainPublicShareAuthSidebar.js'),