[Discover] Fix infinite scrolling of classic table (#110944)

Author: kertal

src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx

@@ -13,6 +13,7 @@ import { debounce } from 'lodash';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { DocTableProps, DocTableRenderProps, DocTableWrapper } from './doc_table_wrapper';
 import { SkipBottomButton } from '../skip_bottom_button';
+import { shouldLoadNextDocPatch } from './lib/should_load_next_doc_patch';
 
 const FOOTER_PADDING = { padding: 0 };
 
@@ -35,12 +36,7 @@ const DocTableInfiniteContent = (props: DocTableRenderProps) => {
     const scheduleCheck = debounce(() => {
       const isMobileView = document.getElementsByClassName('dscSidebar__mobile').length > 0;
       const usedScrollDiv = isMobileView ? scrollMobileElem : scrollDiv;
-
-      const scrollusedHeight = usedScrollDiv.scrollHeight;
-      const scrollTop = Math.abs(usedScrollDiv.scrollTop);
-      const clientHeight = usedScrollDiv.clientHeight;
-
-      if (scrollTop + clientHeight === scrollusedHeight) {
+      if (shouldLoadNextDocPatch(usedScrollDiv)) {
         setLimit((prevLimit) => prevLimit + 50);
       }
     }, 50);

src/plugins/discover/public/application/apps/main/components/doc_table/lib/should_load_next_doc_patch.test.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { shouldLoadNextDocPatch } from './should_load_next_doc_patch';
+
+describe('shouldLoadNextDocPatch', () => {
+  test('next patch should not be loaded', () => {
+    const scrollingDomEl = {
+      scrollHeight: 500,
+      scrollTop: 100,
+      clientHeight: 100,
+    } as HTMLElement;
+
+    expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeFalsy();
+  });
+
+  test('next patch should be loaded', () => {
+    const scrollingDomEl = {
+      scrollHeight: 500,
+      scrollTop: 350,
+      clientHeight: 100,
+    } as HTMLElement;
+
+    expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeTruthy();
+  });
+
+  test("next patch should be loaded even there's a decimal scroll height", () => {
+    const scrollingDomEl = {
+      scrollHeight: 500,
+      scrollTop: 350.34234234,
+      clientHeight: 100,
+    } as HTMLElement;
+
+    expect(shouldLoadNextDocPatch(scrollingDomEl)).toBeTruthy();
+  });
+});

src/plugins/discover/public/application/apps/main/components/doc_table/lib/should_load_next_doc_patch.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// use a buffer to start rendering more documents before the user completely scrolles down
+const verticalScrollBuffer = 100;
+
+/**
+ * Helper function to determine if the next patch of 50 documents should be loaded
+ */
+export function shouldLoadNextDocPatch(domEl: HTMLElement) {
+  // the height of the scrolling div, including content not visible on the screen due to overflow.
+  const scrollHeight = domEl.scrollHeight;
+  // the number of pixels that the div is is scrolled vertically
+  const scrollTop = domEl.scrollTop;
+  // the inner height of the scrolling div, excluding content that's visible on the screen
+  const clientHeight = domEl.clientHeight;
+
+  const consumedHeight = scrollTop + clientHeight;
+  const remainingHeight = scrollHeight - consumedHeight;
+  return remainingHeight < verticalScrollBuffer;
+}