From 6dfdc7afe5f4032eb28f53156a583daf8a36e57e Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Tue, 5 Mar 2024 20:04:42 +0000 Subject: [PATCH 1/2] adds callback ref to lazy loading sentinel Signed-off-by: Ashwin P Chandran --- .../default_discover_table.tsx | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx index d563f1c1d098..21fc1f3670da 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx @@ -5,7 +5,7 @@ import './_doc_table.scss'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState, useCallback } from 'react'; import { EuiButtonEmpty, EuiCallOut, EuiProgress } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { TableHeader } from './table_header'; @@ -70,33 +70,34 @@ export const LegacyDiscoverTable = ({ endRow: rows.length < pageSize ? rows.length : pageSize, }); const observerRef = useRef(null); - const sentinelRef = useRef(null); - - const loadMoreRows = () => { - setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows - }; + const [sentinelEle, setSentinelEle] = useState(); + // Need a callback ref since the element isnt set on the first render. + const sentinelRef = useCallback((node: HTMLDivElement | null) => { + if (node !== null) { + setSentinelEle(node); + } + }, []); useEffect(() => { - const sentinel = sentinelRef.current; - observerRef.current = new IntersectionObserver( - (entries) => { - if (entries[0].isIntersecting) { - loadMoreRows(); - } - }, - { threshold: 1.0 } - ); + if (sentinelEle) { + observerRef.current = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows + } + }, + { threshold: 1.0 } + ); - if (sentinelRef.current) { - observerRef.current.observe(sentinelRef.current); + observerRef.current.observe(sentinelEle); } return () => { - if (observerRef.current && sentinel) { - observerRef.current.unobserve(sentinel); + if (observerRef.current && sentinelEle) { + observerRef.current.unobserve(sentinelEle); } }; - }, []); + }, [sentinelEle]); const [activePage, setActivePage] = useState(0); const pageCount = Math.ceil(rows.length / pageSize); From 89d368d042826240a44515439a009de22d8e05da Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Tue, 5 Mar 2024 20:09:21 +0000 Subject: [PATCH 2/2] Updates Changelog Signed-off-by: Ashwin P Chandran --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b7cdfa591b6..ae9703a5de20 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Discover] Fix table cell content overflowing in Safari ([#5948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5948)) - [BUG][MD]Fix schema for test connection to separate validation based on auth type ([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997)) - [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008)) +- [Discover] Fix lazy loading of the legacy table from getting stuck ([#6041](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6041)) - [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030)) ### 🚞 Infrastructure