hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add debug logging to autoscroll and experiment with using microtasks

Browse source
This commit is contained in:
hippoz 2022-09-20 01:56:34 +03:00
parent 10d25445c5
commit 5aaaf56380
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/Messages.svelte
View file

@ -1,9 +1,11 @@
<script>
import { afterUpdate } from "svelte";
import { getItem } from "../storage.js";
import logger from "../logging.js";
import { messagesStoreProvider, smallViewport } from "../stores.js";
import Message from "./Message.svelte";
const messagesLog = logger("Messages");
export let channelId;
let scrollTarget;
let scrollAnchor;
@ -14,18 +16,23 @@
$: messages = messagesStoreProvider.getStore(channelId);
afterUpdate(() => {
messagesLog("[afterUpdate] reached, creating microtask...");
queueMicrotask(() => {
messagesLog("[afterUpdate] reached microtask");
// hacky way to preserve scroll position when messages are pushed back
if (lastScrollHeight) {
messagesLog("[afterUpdate] restoring scroll height...");
scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
lastScrollHeight = null;
return;
}
if (shouldAutoscroll && scrollAnchor) {
queueMicrotask(() => {
messagesLog("[afterUpdate] performing autoscroll...");
scrollAnchor.scrollIntoView(false);
});
}
});
});
const onScroll = (e) => {
const { scrollHeight, scrollTop, clientHeight } = e.target;
@ -33,10 +40,13 @@
messages.setIsCollectingOldMessages(true);
shouldAutoscroll = true;
isScrolledToBottom = true;
messagesLog("[onScroll] user is scrolled to bottom, enabling autoscroll...");
} else {
shouldAutoscroll = false;
isScrolledToBottom = false;
messagesLog("[onScroll] user is no longer scrolled to bottom, disabling autoscroll...");
if (scrollTop === 0) {
messagesLog("[onScroll] user scrolled to top, loading older messages...");
// load older messages if the user scrolls to the top.
// save the current scroll height if the server returned any messages,
// before commiting them to the store. this is to provide the jank scroll height
@ -55,8 +65,10 @@
// showSidebar is false on small viewports
// scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
if (isScrolledToBottom || $smallViewport) {
messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom...");
queueMicrotask(() => {
scrollAnchor.scrollIntoView(false);
messagesLog("[windowDidResize] scroll to bottom microtask finished.");
});
}
};

1
frontend/src/storage.js
View file

@ -7,6 +7,7 @@ const defaults = {
"state:openChannelId": -1,
"log:Gateway": false,
"log:Store": false,
"log:Messages": false,
"ui:stateful:presistSelectedChannel": true,
"ui:showSidebarToggle": false,
"ui:alwaysUseMobileChatBar": false,