Implement Scroll to Bottom on Timeline V2 (#1493)

Co-authored-by: April Sylph <28949509+AprilSylph@users.noreply.github.com>

src/features/scroll_to_bottom.js

@@ -8,8 +8,8 @@ $(`[id="${scrollToBottomButtonId}"]`).remove();
 const activeClass = 'xkit-scroll-to-bottom-active';
 
 const loaderSelector = `
-${keyToCss('timeline', 'blogRows')} > :last-child,
-${keyToCss('notifications')} + ${keyToCss('loader')}
+${keyToCss('timeline', 'blogRows')} > :is(${keyToCss('scrollContainer')}, .sortableContainer) + div,
+${keyToCss('notifications')} + div
 `;
 const knightRiderLoaderSelector = `:is(${loaderSelector}) > ${keyToCss('knightRiderLoader')}`;
 
@@ -22,13 +22,23 @@ const styleElement = buildStyle(`
 }
 `);
 
+let timeoutID;
+
+const onLoadersAdded = loaders => {
+  if (active) {
+    clearTimeout(timeoutID);
+  }
+};
+
 const scrollToBottom = () => {
+  clearTimeout(timeoutID);
   window.scrollTo({ top: document.documentElement.scrollHeight });
-  const loaders = [...document.querySelectorAll(knightRiderLoaderSelector)];
 
-  if (loaders.length === 0) {
-    stopScrolling();
-  }
+  timeoutID = setTimeout(() => {
+    if (!document.querySelector(knightRiderLoaderSelector)) {
+      stopScrolling();
+    }
+  }, 500);
 };
 const observer = new ResizeObserver(scrollToBottom);
 
@@ -40,6 +50,7 @@ const startScrolling = () => {
 };
 
 const stopScrolling = () => {
+  clearTimeout(timeoutID);
   observer.disconnect();
   active = false;
   scrollToBottomButton?.classList.remove(activeClass);
@@ -79,12 +90,14 @@ const addButtonToPage = async function ([scrollToTopButton]) {
 
 export const main = async function () {
   pageModifications.register(`button[aria-label="${translate('Scroll to top')}"]`, addButtonToPage);
+  pageModifications.register(knightRiderLoaderSelector, onLoadersAdded);
   document.documentElement.append(styleElement);
 };
 
 export const clean = async function () {
   pageModifications.unregister(addButtonToPage);
   pageModifications.unregister(checkForButtonRemoved);
+  pageModifications.unregister(onLoadersAdded);
   stopScrolling();
   scrollToBottomButton?.remove();
   styleElement.remove();