(refacto) rooms infinite-loading by intersection

Author: antoine92190

src/lib/RoomsList/RoomsList.vue

@@ -30,7 +30,7 @@
 			</slot>
 		</div>
 
-		<div v-if="!loadingRooms" class="vac-room-list">
+		<div v-if="!loadingRooms" id="rooms-list" class="vac-room-list">
 			<div
 				v-for="fRoom in filteredRooms"
 				:id="fRoom.roomId"
@@ -54,31 +54,15 @@
 				</room-content>
 			</div>
 			<transition name="vac-fade-message">
-				<infinite-loading
-					v-if="rooms.length && !loadingRooms"
-					force-use-infinite-wrapper=".vac-room-list"
-					web-component-name="vue-advanced-chat"
-					spinner="spiral"
-					@infinite="loadMoreRooms"
-				>
-					<template #spinner>
-						<loader :show="true" :infinite="true" />
-					</template>
-					<template #no-results>
-						<div />
-					</template>
-					<template #no-more>
-						<div />
-					</template>
-				</infinite-loading>
+				<div v-if="rooms.length && !loadingRooms" id="infinite-loader">
+					<loader :show="showLoader" :infinite="true" />
+				</div>
 			</transition>
 		</div>
 	</div>
 </template>
 
 <script>
-import InfiniteLoading from 'vue-infinite-loading'
-
 import Loader from '../../components/Loader/Loader'
 
 import RoomsSearch from './RoomsSearch/RoomsSearch'
@@ -89,7 +73,6 @@ import filteredUsers from '../../utils/filter-items'
 export default {
 	name: 'RoomsList',
 	components: {
-		InfiniteLoading,
 		Loader,
 		RoomsSearch,
 		RoomContent
@@ -122,7 +105,8 @@ export default {
 	data() {
 		return {
 			filteredRooms: this.rooms || [],
-			infiniteState: null,
+			infiniteLoader: null,
+			showLoader: true,
 			loadingMoreRooms: false,
 			selectedRoomId: ''
 		}
@@ -133,25 +117,22 @@ export default {
 			deep: true,
 			handler(newVal, oldVal) {
 				this.filteredRooms = newVal
-				if (
-					this.infiniteState &&
-					(newVal.length !== oldVal.length || this.roomsLoaded)
-				) {
-					this.infiniteState.loaded()
+				if (newVal.length !== oldVal.length || this.roomsLoaded) {
 					this.loadingMoreRooms = false
 				}
 			}
 		},
 		loadingRooms(val) {
-			if (val) this.infiniteState = null
+			if (!val) {
+				setTimeout(() => this.initIntersectionObserver())
+			}
 		},
 		loadingMoreRooms(val) {
 			this.$emit('loading-more-rooms', val)
 		},
 		roomsLoaded(val) {
-			if (val && this.infiniteState) {
+			if (val) {
 				this.loadingMoreRooms = false
-				this.infiniteState.complete()
 			}
 		},
 		room: {
@@ -163,6 +144,27 @@ export default {
 	},
 
 	methods: {
+		initIntersectionObserver() {
+			const loader = document.getElementById('infinite-loader')
+
+			if (loader && !this.infiniteLoader) {
+				this.infiniteLoader = loader
+
+				const options = {
+					root: document.getElementById('rooms-list'),
+					rootMargin: '100px',
+					threshold: 0
+				}
+
+				const observer = new IntersectionObserver(entries => {
+					if (entries[0].isIntersecting) {
+						this.loadMoreRooms()
+					}
+				}, options)
+
+				observer.observe(loader)
+			}
+		},
 		searchRoom(ev) {
 			this.filteredRooms = filteredUsers(
 				this.rooms,
@@ -175,15 +177,14 @@ export default {
 			if (!this.isMobile) this.selectedRoomId = room.roomId
 			this.$emit('fetch-room', { room })
 		},
-		loadMoreRooms(infiniteState) {
+		loadMoreRooms() {
 			if (this.loadingMoreRooms) return
 
 			if (this.roomsLoaded) {
 				this.loadingMoreRooms = false
-				return infiniteState.complete()
+				return (this.showLoader = false)
 			}
 
-			this.infiniteState = infiniteState
 			this.$emit('fetch-more-rooms')
 			this.loadingMoreRooms = true
 		}