butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve message loading on scroll

Browse source 
Keep a buffer "before and after" our current window.
This commit is contained in:
N-Pex 2021-04-09 16:40:03 +02:00
parent 4be5ba2038
commit dfb8e6a814
1 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/Chat.vue
View file

@ -341,6 +341,7 @@ import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
import MessageOperationsBottomSheet from './MessageOperationsBottomSheet'; import MessageOperationsBottomSheet from './MessageOperationsBottomSheet';
const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */ const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
const WINDOW_BUFFER_SIZE = 0.3 /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position! */
// from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html // from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
function ScrollPosition(node) { function ScrollPosition(node) {
@ -406,6 +407,10 @@ export default {
currentInput: "", currentInput: "",
typingMembers: [], typingMembers: [],
timelineWindow: null, timelineWindow: null,
/** true if we are currently paginating */
timelineWindowPaginating: false,
scrollPosition: null, scrollPosition: null,
currentImageInput: null, currentImageInput: null,
currentImageInputPath: null, currentImageInputPath: null,
@ -620,7 +625,7 @@ export default {
console.log("Read up to " + initialEventId); console.log("Read up to " + initialEventId);
initialEventId = "$rkyknHVJfTmbICP-lw3MyQ9Kw-cpMOGnh09l_tHg4ss"; //initialEventId = null;
this.timelineWindow = new TimelineWindow( this.timelineWindow = new TimelineWindow(
this.$matrix.matrixClient, this.$matrix.matrixClient,
@ -637,7 +642,7 @@ export default {
const getMoreIfNeeded = function _getMoreIfNeeded() { const getMoreIfNeeded = function _getMoreIfNeeded() {
const container = self.$refs.chatContainer; const container = self.$refs.chatContainer;
if ( if (
container.scrollHeight <= container.clientHeight && container.scrollHeight <= (1 + 2 * WINDOW_BUFFER_SIZE) * container.clientHeight &&
self.timelineWindow && self.timelineWindow &&
self.timelineWindow.canPaginate(EventTimeline.BACKWARDS) self.timelineWindow.canPaginate(EventTimeline.BACKWARDS)
) { ) {
@ -848,12 +853,12 @@ export default {
if (!container) { if (!container) {
return; return;
} }
if (container.scrollTop == 0) { const bufferHeight = container.clientHeight * WINDOW_BUFFER_SIZE;
if (container.scrollTop <= bufferHeight) {
// Scrolled to top // Scrolled to top
this.handleScrolledToTop(); this.handleScrolledToTop();
} else if ( } else if (
container.scrollHeight - container.scrollTop.toFixed(0) == container.scrollHeight - container.scrollTop.toFixed(0) - container.clientHeight <= bufferHeight
container.clientHeight
) { ) {
this.handleScrolledToBottom(false); this.handleScrolledToBottom(false);
} }
@ -1012,8 +1017,10 @@ export default {
console.log("@top"); console.log("@top");
if ( if (
this.timelineWindow && this.timelineWindow &&
this.timelineWindow.canPaginate(EventTimeline.BACKWARDS) this.timelineWindow.canPaginate(EventTimeline.BACKWARDS) &&
!this.timelineWindowPaginating
) { ) {
this.timelineWindowPaginating = true;
this.timelineWindow this.timelineWindow
.paginate(EventTimeline.BACKWARDS, 10, true) .paginate(EventTimeline.BACKWARDS, 10, true)
.then((success) => { .then((success) => {
@ -1026,6 +1033,9 @@ export default {
this.scrollPosition.restore(); this.scrollPosition.restore();
}); });
} }
})
.finally(() => {
this.timelineWindowPaginating = false;
}); });
} }
}, },
@ -1034,8 +1044,10 @@ export default {
console.log("@bottom"); console.log("@bottom");
if ( if (
this.timelineWindow && this.timelineWindow &&
this.timelineWindow.canPaginate(EventTimeline.FORWARDS) this.timelineWindow.canPaginate(EventTimeline.FORWARDS) &&
!this.timelineWindowPaginating
) { ) {
this.timelineWindowPaginating = true;
this.timelineWindow this.timelineWindow
.paginate(EventTimeline.FORWARDS, 10, true) .paginate(EventTimeline.FORWARDS, 10, true)
.then((success) => { .then((success) => {
@ -1051,6 +1063,9 @@ export default {
} }
}); });
} }
})
.finally(() => {
this.timelineWindowPaginating = false;
}); });
} }
}, },