try to implement load more without scrolling

src/intl/en-US.js

@@ -149,6 +149,7 @@ export default {
     <li><kbd>j</kbd> or <kbd>↓</kbd> to activate the next toot</li>
     <li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous toot</li>
     <li><kbd>.</kbd> to show more and scroll to top</li>
+    <li><kbd>,</kbd> to show more without scrolling</li>
     <li><kbd>o</kbd> to open</li>
     <li><kbd>f</kbd> to favorite</li>
     <li><kbd>b</kbd> to boost</li>

src/routes/_actions/showMoreWithoutScrollingToTop.js

@@ -0,0 +1,23 @@
+import { showMoreItemsForCurrentTimeline } from './timeline.js'
+import { getScrollContainer } from '../_utils/scrollContainer.js'
+import { tryToFocusElement } from '../_utils/tryToFocusElement.js'
+import { doubleRAF } from '../_utils/doubleRAF.js'
+
+export async function showMoreWithoutScrollingToTop () {
+  // Similar to "." (showMoreAndScrollToTop), except it doesn't scroll to the top
+  const id = document.activeElement && document.activeElement.id
+  const { scrollHeight, scrollTop } = getScrollContainer()
+  await showMoreItemsForCurrentTimeline()
+  // There seems to be some kind of race condition with what the timeline is doing. This is a best
+  // effort to maintain scroll position.
+  await new Promise(resolve => doubleRAF(resolve))
+  await new Promise(resolve => doubleRAF(resolve))
+  // restore scroll position
+  const { scrollHeight: newScrollHeight } = getScrollContainer()
+  const newScrollTop = scrollTop + (newScrollHeight - scrollHeight)
+  console.log({ scrollHeight, scrollTop, newScrollHeight, newScrollTop })
+  getScrollContainer().scrollTop = newScrollTop
+  if (id) {
+    await tryToFocusElement(id)
+  }
+}

src/routes/_components/timeline/Timeline.html

@@ -23,6 +23,7 @@
   </div>
 </FocusRestoration>
 <Shortcut scope="global" key="." on:pressed="showMoreAndScrollToTop()" />
+<Shortcut scope="global" key="," on:pressed="showMoreWithoutScrollingToTop()" />
 <ScrollListShortcuts />
 <script>
   import { store } from '../../_store/store.js'
@@ -50,6 +51,7 @@
   import { observe } from 'svelte-extras'
   import { createMakeProps } from '../../_actions/createMakeProps.js'
   import { showMoreAndScrollToTop } from '../../_actions/showMoreAndScrollToTop.js'
+  import { showMoreWithoutScrollingToTop } from '../../_actions/showMoreWithoutScrollingToTop.js'
   import FocusRestoration from '../FocusRestoration.html'
 
   export default {
@@ -227,7 +229,8 @@
         console.log('timeline preinitialized')
         this.store.set({ timelinePreinitialized: true })
       },
-      showMoreAndScrollToTop
+      showMoreAndScrollToTop,
+      showMoreWithoutScrollingToTop
     },
     components: {
       ScrollListShortcuts,