From 23503a5ac768319d7d5f55e18a5a8406767b543c Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sun, 30 Apr 2023 01:49:34 +0200
Subject: [PATCH] Optimize stream and packet loading

---
 src/components/Sidebar.vue  | 21 ++++++++++++++++++---
 src/views/ContentStream.vue | 20 +++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index f364dce..66b674c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -130,6 +130,8 @@ export default {
 		methods: {
 			infiniteLoadingHandler($state) {
 				const ourStreams = this.streams;
+				const pageSize = this.$store.state.pageSize;
+
 				let startsFrom;
 				if (ourStreams?.length && ourStreams[ourStreams.length - 1]) {
 					startsFrom = ourStreams[ourStreams.length - 1].id;
@@ -139,18 +141,31 @@ export default {
 
 				this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
 					startingFrom: startsFrom,
-					pageSize: this.$store.state.pageSize,
+					pageSize: pageSize,
 					pattern: this.$route.query.pattern ? {id: this.$route.query.pattern,} : null,
 					favorites: this.$store.state.displayFavoritesOnly,
 				}).then(r => {
 					const data = r.data;
-					if (data?.length === 0) return $state.complete();
+					if (data?.length === 0) {
+						console.log('Finished loading streams (empty page)');
+						return $state.complete();
+					}
+
 					if (data[0]?.id === this.streams[0]?.id) {
+						console.log('Finished loading streams (overlap detected)');
 						return $state.complete();
 					}
 
 					this.streams.push(...data);
-					return $state.loaded();
+
+					if (data.length < pageSize) {
+						// this was the last page
+						console.log('Finished loading streams (last page was not full)');
+						$state.complete();
+					} else {
+						console.log('Loaded another page of streams');
+						$state.loaded()
+					}
 				}).catch(e => {
 					this.$bvToast.toast(`Failed to load portion of streams: ${e}`, {
 						title: 'Error',
diff --git a/src/views/ContentStream.vue b/src/views/ContentStream.vue
index c112763..42244af 100644
--- a/src/views/ContentStream.vue
+++ b/src/views/ContentStream.vue
@@ -33,6 +33,7 @@
 				if (!this.$route.params.streamId) return $state.complete();
 
 				const packets = this.packets;
+				const pageSize = this.$store.state.pageSize;
 				let startsFrom;
 				if (packets && packets.length && packets[packets.length - 1]) {
 					startsFrom = packets[packets.length - 1].id;
@@ -42,14 +43,27 @@
 
 				this.$http.post(`packet/${this.$route.params.streamId}`, {
 					startingFrom: startsFrom,
-					pageSize: this.$store.state.pageSize,
+					pageSize: pageSize,
 				}).then(response => {
 					const data = response.data;
-					if (data.length === 0) return $state.complete();
+					if (data.length === 0) {
+						console.log('Finished loading packets (empty page)');
+						return $state.complete();
+					}
+
 					if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
+						console.log('Finished loading packets (overlap detected)');
+						return $state.complete();
+					}
+
+					this.packets.push(...data);
+
+					if (data.length < pageSize) {
+						// this was the last page
+						console.log('Finished loading packets (last page was not full)');
 						$state.complete();
 					} else {
-						this.packets.push(...data);
+						console.log('Loaded another page of packets');
 						$state.loaded();
 					}
 				}).catch(e => {