From f7f536b3187ecd5f22afd7fced7794fd9e0a525f Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 22 Apr 2022 16:43:26 +0300
Subject: [PATCH] frontend: preserve scroll position when loading more messages

---
 frontend/src/components/App.svelte            |  3 +--
 .../src/components/pages/main/Messages.svelte | 19 ++++++++++++++++---
 frontend/src/stores.js                        |  4 +++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/App.svelte b/frontend/src/components/App.svelte
index c8be979..c8fd8dc 100644
--- a/frontend/src/components/App.svelte
+++ b/frontend/src/components/App.svelte
@@ -1,6 +1,5 @@
 <script>
-import Main from "./pages/main/Main.svelte";
-
+    import Main from "./pages/main/Main.svelte";
 </script>
 
 <Main />
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/pages/main/Messages.svelte
index 1eb8681..ed96902 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/pages/main/Messages.svelte
@@ -1,11 +1,11 @@
 <script>
     import { afterUpdate, beforeUpdate } from "svelte";
-import { element } from "svelte/internal";
     import { messagesStoreProvider } from "../../../stores.js";
 
     export let channelId;
     let scrollTarget;
     let shouldAutoscroll = false;
+    let lastScrollHeight = null;
 
     $: messages = messagesStoreProvider.getStore(channelId);
 
@@ -14,6 +14,12 @@ import { element } from "svelte/internal";
     });
 
     afterUpdate(() => {
+        // hacky way to preserve scroll position when messages are pushed back
+        if (lastScrollHeight) {
+            scrollTarget.scrollTop =  scrollTarget.scrollHeight - lastScrollHeight;
+            lastScrollHeight = null;
+            return;
+        }
         if (shouldAutoscroll && scrollTarget) {
             scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
         }
@@ -21,11 +27,18 @@ import { element } from "svelte/internal";
 
     const onScroll = (e) => {
         const { scrollTop, offsetHeight, scrollHeight } = e.target;
-        if ((scrollTop + offsetHeight) >= scrollHeight) {
+        if ((scrollTop + offsetHeight) >= scrollHeight) { // user scrolled to bottom
             messages.setIsCollectingOldMessages(true);
         } else {
             if (scrollTop === 0) {
-                messages.loadOlderMessages();
+                // 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
+                // preservation
+                messages.loadOlderMessages(() => {
+                    if (scrollTarget)
+                        lastScrollHeight = scrollTarget.scrollHeight;
+                });
             }
             messages.setIsCollectingOldMessages(false);
         }
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index c58ae64..13aee94 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -172,11 +172,13 @@ class MessageStore extends Store {
         this.collectOldMessages();
     }
 
-    async loadOlderMessages() {
+    async loadOlderMessages(beforeCommitToStore=null) {
         const oldestMessage = this.value[0];
         const endpoint = oldestMessage ? `channels/${this.channelId}/messages/?before=${oldestMessage.id}` : `channels/${this.channelId}/messages`;
         const res = await request("GET", apiRoute(endpoint), true, null);
         if (res.success && res.ok && res.json && res.json.length > 0) {
+            if (beforeCommitToStore)
+                beforeCommitToStore(res.json);
             res.json.reverse();
             this.value = res.json.concat(this.value);
             this.updated();