Move into one component and add loading component

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/FilesSidebarCallViewApp.vue

@@ -48,9 +48,9 @@ export default {
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView: () => import(/* webpackChunkName: "talk-call" */'./components/CallView/CallView.vue'),
+		CallView: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
 		PreventUnload,
-		TopBar: () => import(/* webpackChunkName: "talk-call" */'./components/TopBar/TopBar.vue'),
+		TopBar: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue'),
 	},
 
 	mixins: [

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,6 +50,8 @@ import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import LoadingComponent from './components/LoadingComponent.vue'
+
 import browserCheck from './mixins/browserCheck.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import { EventBus } from './services/EventBus.js'
@@ -72,9 +70,12 @@ export default {
 	name: 'FilesSidebarTabApp',
 
 	components: {
-		CallButton: () => import(/* webpackChunkName: "talk-chat" */'./components/TopBar/CallButton.vue'),
-		ChatView: () => import(/* webpackChunkName: "talk-chat" */'./components/ChatView.vue'),
-		MediaSettings: () => import(/* webpackChunkName: "talk-chat" */'./components/MediaSettings/MediaSettings.vue'),
+		FilesSidebarChatView: () => ({
+			component: import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
+			loading: {
+				render: (h) => h(LoadingComponent, { class: 'tab-loading' }),
+			},
+		}),
 		NcButton,
 	},
 
@@ -422,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',