From 4511c4945c2eaa36d948623cbfd262cba00df1ec Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 1 Sep 2023 19:20:58 +0200
Subject: [PATCH 1/3] Dynamically import components

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/FilesSidebarCallViewApp.vue | 11 ++++-------
 src/FilesSidebarTabApp.vue      | 10 +++-------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index d27df21feee..400bba186f3 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/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,9 +35,6 @@
 <script>
 import PreventUnload from 'vue-prevent-unload'
 
-import CallView from './components/CallView/CallView.vue'
-import TopBar from './components/TopBar/TopBar.vue'
-
 import { useIsInCall } from './composables/useIsInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
@@ -51,9 +48,9 @@ export default {
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView,
+		CallView: () => import(/* webpackChunkName: "talk-call" */'./components/CallView/CallView.vue'),
 		PreventUnload,
-		TopBar,
+		TopBar: () => import(/* webpackChunkName: "talk-call" */'./components/TopBar/TopBar.vue'),
 	},
 
 	mixins: [
diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index e89a886fde1..6ceafdbbbe3 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/src/FilesSidebarTabApp.vue
@@ -54,10 +54,6 @@ 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 browserCheck from './mixins/browserCheck.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import { EventBus } from './services/EventBus.js'
@@ -76,9 +72,9 @@ export default {
 	name: 'FilesSidebarTabApp',
 
 	components: {
-		CallButton,
-		ChatView,
-		MediaSettings,
+		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'),
 		NcButton,
 	},
 

From a0a6dfb007cbdea45d8e1d1c596cc2f8b80ab340 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 8 Sep 2023 12:23:50 +0200
Subject: [PATCH 2/3] Move into one component and add loading component

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/FilesSidebarCallViewApp.vue     |  4 +-
 src/FilesSidebarTabApp.vue          | 30 +++++--------
 src/components/LoadingComponent.vue | 31 +++++++++++++
 src/views/FilesSidebarChatView.vue  | 68 +++++++++++++++++++++++++++++
 webpack.config.js                   |  7 +++
 5 files changed, 119 insertions(+), 21 deletions(-)
 create mode 100644 src/components/LoadingComponent.vue
 create mode 100644 src/views/FilesSidebarChatView.vue

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 400bba186f3..8656180ac80 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/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: [
diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index 6ceafdbbbe3..7c0738cc1e2 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/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>
diff --git a/src/components/LoadingComponent.vue b/src/components/LoadingComponent.vue
new file mode 100644
index 00000000000..3e9f3569dcb
--- /dev/null
+++ b/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>
diff --git a/src/views/FilesSidebarChatView.vue b/src/views/FilesSidebarChatView.vue
new file mode 100644
index 00000000000..67fed593926
--- /dev/null
+++ b/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>
diff --git a/webpack.config.js b/webpack.config.js
index 970115584e2..da6e7401590 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -39,6 +39,13 @@ module.exports = mergeWithRules({
 	},
 
 	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				defaultVendors: {
+					reuseExistingChunk: true,
+				},
+			},
+		},
 		minimizer: [
 			new EsbuildPlugin({
 				target: 'es2020',

From 2c026aba790a77929e05fc19324966277201709b Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 8 Sep 2023 21:25:38 +0200
Subject: [PATCH 3/3] Adding a loading component to the call view

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/FilesSidebarCallViewApp.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 8656180ac80..dd48a54ffb6 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -35,6 +35,8 @@
 <script>
 import PreventUnload from 'vue-prevent-unload'
 
+import LoadingComponent from './components/LoadingComponent.vue'
+
 import { useIsInCall } from './composables/useIsInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
@@ -48,7 +50,12 @@ export default {
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
+		CallView: () => ({
+			component: import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
+			loading: {
+				render: (h) => h(LoadingComponent, { class: 'call-loading' }),
+			},
+		}),
 		PreventUnload,
 		TopBar: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue'),
 	},
@@ -286,6 +293,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './assets/variables';
+
 #call-container {
 	position: relative;
 
@@ -297,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>