frontend: improve channel switch latency by reducing reflows due to scroll-related getters

frontend/src/components/pages/main/Message.svelte

@@ -0,0 +1,28 @@
+<script>
+    export let message;
+</script>
+
+<style>
+    .message {
+        overflow-x: none;
+        word-break: break-all;
+    }
+
+    .message-content {
+        color: var(--foreground-color-2);
+    }
+
+    .pending {
+        color: var(--foreground-color-3);
+    }
+
+    .author {
+        font-weight: bold;
+        margin-right: var(--space-xxs);
+    }
+</style>
+
+<div class="message">
+    <span class="author">{ message.author_username }</span>
+    <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
+</div>

frontend/src/components/pages/main/Messages.svelte

@@ -1,27 +1,25 @@
 <script>
-    import { afterUpdate, beforeUpdate } from "svelte";
+    import { afterUpdate, beforeUpdate, onMount } from "svelte";
     import { messagesStoreProvider } from "../../../stores.js";
+    import Message from "./Message.svelte";
 
     export let channelId;
     let scrollTarget;
-    let shouldAutoscroll = false;
+    let scrollAnchor;
+    let shouldAutoscroll = true;
     let lastScrollHeight = null;
 
     $: messages = messagesStoreProvider.getStore(channelId);
 
-    beforeUpdate(() => {
-        shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
-    });
-
     afterUpdate(() => {
         // hacky way to preserve scroll position when messages are pushed back
         if (lastScrollHeight) {
-            scrollTarget.scrollTop =  scrollTarget.scrollHeight - lastScrollHeight;
+            scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
             lastScrollHeight = null;
             return;
         }
-        if (shouldAutoscroll && scrollTarget) {
+        if (shouldAutoscroll && scrollAnchor) {
-            scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
+            scrollAnchor.scrollIntoView(false);
         }
     });
 
@@ -29,7 +27,9 @@
         const { scrollTop, offsetHeight, scrollHeight } = e.target;
         if ((scrollTop + offsetHeight) >= scrollHeight) { // user scrolled to bottom
             messages.setIsCollectingOldMessages(true);
+            shouldAutoscroll = true;
         } else {
+            shouldAutoscroll = false;
             if (scrollTop === 0) {
                 // load older messages if the user scrolls to the top.
                 // save the current scroll height if the server returned any messages,
@@ -57,31 +57,11 @@
         overflow-x: hidden;
         background-color: var(--background-color-1);
     }
-
-    .message {
-        overflow-x: none;
-        word-break: break-all;
-    }
-
-    .message-content {
-        color: var(--foreground-color-2);
-    }
-
-    .pending {
-        color: var(--foreground-color-3);
-    }
-
-    .author {
-        font-weight: bold;
-        margin-right: var(--space-xxs);
-    }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
-        <div class="message">
+        <Message message={message} />
-            <span class="author">{ message.author_username }</span>
-            <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
-        </div>
     {/each}
+    <div bind:this={ scrollAnchor } />
 </div>