(refacto) replace infinite-scroll by observer api

Author: antoine92190

package.json

@@ -76,8 +76,7 @@
 	"dependencies": {
 		"emoji-picker-element": "^1.8.1",
 		"linkifyjs": "^2.1.9",
-		"v-click-outside": "^3.1.2",
-		"vue-infinite-loading": "https://github.com/antoine92190/vue-infinite-loading/tarball/master"
+		"v-click-outside": "^3.1.2"
 	},
 	"optionalDependencies": {
 		"lamejs": "^1.2.0"

src/lib/Room/Room.scss

@@ -54,10 +54,6 @@
 		margin-bottom: 20px;
 	}
 
-	.vac-infinite-loading {
-		height: 68px;
-	}
-
 	.vac-icon-scroll {
 		position: absolute;
 		bottom: 80px;
@@ -230,10 +226,6 @@
 			margin-top: 50px;
 		}
 
-		.vac-infinite-loading {
-			height: 58px;
-		}
-
 		.vac-box-footer {
 			padding: 7px 2px 7px 7px;
 

src/lib/Room/Room.vue

@@ -30,6 +30,7 @@
 		</room-header>
 
 		<div
+			id="messages-list"
 			ref="scrollContainer"
 			class="vac-container-scroll"
 			@scroll="onContainerScroll"
@@ -53,32 +54,16 @@
 							</div>
 						</div>
 					</transition>
-					<transition name="vac-fade-message">
-						<infinite-loading
-							v-if="messages.length"
-							:class="{ 'vac-infinite-loading': !messagesLoaded }"
-							force-use-infinite-wrapper=".vac-container-scroll"
-							web-component-name="vue-advanced-chat"
-							spinner="spiral"
-							direction="top"
-							:distance="40"
-							@infinite="loadMoreMessages"
-						>
-							<template #spinner>
-								<loader :show="true" :infinite="true">
-									<template v-for="(idx, name) in $scopedSlots" #[name]="data">
-										<slot :name="name" v-bind="data" />
-									</template>
-								</loader>
-							</template>
-							<template #no-results>
-								<div />
-							</template>
-							<template #no-more>
-								<div />
+					<div
+						v-if="messages.length && !messagesLoaded"
+						id="infinite-loader-messages"
+					>
+						<loader :show="true" :infinite="true">
+							<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+								<slot :name="name" v-bind="data" />
 							</template>
-						</infinite-loading>
-					</transition>
+						</loader>
+					</div>
 					<transition-group :key="roomId" name="vac-fade-message" tag="span">
 						<div v-for="(m, i) in messages" :key="m.indexId || m._id">
 							<message
@@ -316,7 +301,6 @@
 </template>
 
 <script>
-import InfiniteLoading from 'vue-infinite-loading'
 import vClickOutside from 'v-click-outside'
 import { Database } from 'emoji-picker-element'
 
@@ -335,7 +319,7 @@ import Message from '../Message/Message'
 import filteredItems from '../../utils/filter-items'
 import Recorder from '../../utils/recorder'
 
-const { detectMobile, iOSDevice } = require('../../utils/mobile-detection')
+const { detectMobile } = require('../../utils/mobile-detection')
 
 const debounce = (func, delay) => {
 	let inDebounce
@@ -350,7 +334,6 @@ const debounce = (func, delay) => {
 export default {
 	name: 'Room',
 	components: {
-		InfiniteLoading,
 		Loader,
 		SvgIcon,
 		EmojiPickerContainer,
@@ -422,6 +405,8 @@ export default {
 			messageReply: null,
 			infiniteState: null,
 			loadingMessages: false,
+			observer: null,
+			showLoader: true,
 			loadingMoreMessages: false,
 			files: [],
 			fileDialog: false,
@@ -502,6 +487,7 @@ export default {
 			} else {
 				if (this.infiniteState) this.infiniteState.loaded()
 				this.focusTextarea(true)
+				setTimeout(() => this.initIntersectionObserver())
 			}
 		},
 		room: {
@@ -596,6 +582,47 @@ export default {
 	},
 
 	methods: {
+		initIntersectionObserver() {
+			if (this.observer) {
+				this.showLoader = true
+				this.observer.disconnect()
+			}
+
+			const loader = document.getElementById('infinite-loader-messages')
+
+			if (loader) {
+				const options = {
+					root: document.getElementById('messages-list'),
+					rootMargin: '60px',
+					threshold: 0
+				}
+
+				this.observer = new IntersectionObserver(entries => {
+					if (entries[0].isIntersecting) {
+						this.loadMoreMessages()
+					}
+				}, options)
+
+				this.observer.observe(loader)
+			}
+		},
+		preventTopScroll() {
+			const container = this.$refs.scrollContainer
+			const prevScrollHeight = container.scrollHeight
+
+			const observer = new ResizeObserver(_ => {
+				if (container.scrollHeight !== prevScrollHeight) {
+					this.$refs.scrollContainer.scrollTo({
+						top: container.scrollHeight - prevScrollHeight
+					})
+					observer.disconnect()
+				}
+			})
+
+			for (var i = 0; i < container.children.length; i++) {
+				observer.observe(container.children[i])
+			}
+		},
 		getTextareaRef() {
 			return this.$refs.roomTextarea
 		},
@@ -962,26 +989,25 @@ export default {
 
 			this.resetMessage(true)
 		},
-		loadMoreMessages(infiniteState) {
-			if (this.loadingMessages) {
-				this.infiniteState = infiniteState
-				return
-			}
+		loadMoreMessages() {
+			if (this.loadingMessages) return
 
 			setTimeout(
 				() => {
 					if (this.loadingMoreMessages) return
 
 					if (this.messagesLoaded || !this.room.roomId) {
-						return infiniteState.complete()
+						this.loadingMoreMessages = false
+						this.showLoader = false
+						return
 					}
 
-					this.infiniteState = infiniteState
+					this.preventTopScroll()
 					this.$emit('fetch-messages')
 					this.loadingMoreMessages = true
 				},
-				// prevent scroll bouncing issue on iOS devices
-				iOSDevice() ? 500 : 0
+				// prevent scroll bouncing speed
+				500
 			)
 		},
 		messageActionHandler({ action, message }) {

src/utils/mobile-detection.js

@@ -21,10 +21,3 @@ function getUserAgent() {
 
 	return userAgent
 }
-
-export function iOSDevice() {
-	return (
-		['iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-		(navigator.userAgent.includes('Mac') && 'ontouchend' in document)
-	)
-}