Merge pull request #10323 from nextcloud/fix/8755/Lazy-load-files-sid…

…ebar

Lazy load files sidebar of Talk

src/FilesSidebarCallViewApp.vue

@@ -22,10 +22,10 @@
 
 <template>
 	<div v-if="isInFile" class="talk-sidebar-callview">
-		<TopBar v-show="showCallView"
+		<TopBar v-if="showCallView"
 			:is-in-call="true"
 			:is-sidebar="true" />
-		<CallView v-show="showCallView"
+		<CallView v-if="showCallView"
 			:token="token"
 			:is-sidebar="true" />
 		<PreventUnload :when="warnLeaving" />
@@ -35,8 +35,7 @@
 <script>
 import PreventUnload from 'vue-prevent-unload'
 
-import CallView from './components/CallView/CallView.vue'
-import TopBar from './components/TopBar/TopBar.vue'
+import LoadingComponent from './components/LoadingComponent.vue'
 
 import { useIsInCall } from './composables/useIsInCall.js'
 import participant from './mixins/participant.js'
@@ -51,9 +50,14 @@ export default {
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView,
+		CallView: () => ({
+			component: import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
+			loading: {
+				render: (h) => h(LoadingComponent, { class: 'call-loading' }),
+			},
+		}),
 		PreventUnload,
-		TopBar,
+		TopBar: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue'),
 	},
 
 	mixins: [
@@ -289,6 +293,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './assets/variables';
+
 #call-container {
 	position: relative;
 
@@ -300,4 +306,10 @@ export default {
 	padding-bottom: 56.25%;
 	max-height: 56.25%;
 }
+
+.call-loading{
+	padding-bottom: 56.25%;
+	max-height: 56.25%;
+	background-color: $color-call-background;
+}
 </style>

src/FilesSidebarTabApp.vue

@@ -38,11 +38,7 @@
 				{{ t('spreed', 'Join conversation') }}
 			</NcButton>
 		</div>
-		<template v-else>
-			<CallButton class="call-button" />
-			<ChatView />
-			<MediaSettings :initialize-on-mounted="false" />
-		</template>
+		<FilesSidebarChatView v-else />
 	</div>
 </template>
 
@@ -54,9 +50,7 @@ import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import ChatView from './components/ChatView.vue'
-import MediaSettings from './components/MediaSettings/MediaSettings.vue'
-import CallButton from './components/TopBar/CallButton.vue'
+import LoadingComponent from './components/LoadingComponent.vue'
 
 import browserCheck from './mixins/browserCheck.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
@@ -76,9 +70,12 @@ export default {
 	name: 'FilesSidebarTabApp',
 
 	components: {
-		CallButton,
-		ChatView,
-		MediaSettings,
+		FilesSidebarChatView: () => ({
+			component: import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
+			loading: {
+				render: (h) => h(LoadingComponent, { class: 'tab-loading' }),
+			},
+		}),
 		NcButton,
 	},
 
@@ -426,16 +423,7 @@ export default {
 	justify-content: center;
 }
 
-.call-button {
-	/* Center button horizontally. */
-	margin-left: auto;
-	margin-right: auto;
-
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-
-.chatView {
-	overflow: hidden;
+.tab-loading {
+	height: 100%;
 }
 </style>

src/components/LoadingComponent.vue

@@ -0,0 +1,31 @@
+<!--
+  - @copyright Copyright (c) 2023 Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @author Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="icon-loading spinner" />
+</template>
+<script>
+export default {
+
+	name: 'LoadingComponent',
+
+}
+</script>

src/views/FilesSidebarChatView.vue

@@ -0,0 +1,68 @@
+<!--
+  - @copyright Copyright (c) 2023 Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @author Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="talk-tab__wrapper">
+		<CallButton class="call-button" />
+		<ChatView />
+		<MediaSettings :initialize-on-mounted="false" />
+	</div>
+</template>
+<script>
+
+import ChatView from '../components/ChatView.vue'
+import MediaSettings from '../components/MediaSettings/MediaSettings.vue'
+import CallButton from '../components/TopBar/CallButton.vue'
+
+export default {
+
+	name: 'FilesSidebarChatView',
+
+	components: {
+		CallButton,
+		ChatView,
+		MediaSettings,
+	},
+
+}
+
+</script>
+
+<style scoped>
+.talk-tab__wrapper{
+	height: 100%;
+}
+
+.call-button {
+	/* Center button horizontally. */
+	margin-left: auto;
+	margin-right: auto;
+
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.chatView {
+	overflow: hidden;
+	/* Considering the call button height (44px + 10px * 2) */
+	height: calc(100% - 64px);
+}
+</style>

webpack.config.js

@@ -39,6 +39,13 @@ module.exports = mergeWithRules({
 	},
 
 	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				defaultVendors: {
+					reuseExistingChunk: true,
+				},
+			},
+		},
 		minimizer: [
 			new EsbuildPlugin({
 				target: 'es2020',