diff --git a/superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx b/superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx index af37bff0c2b..60ce2a2b47c 100644 --- a/superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx +++ b/superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx @@ -18,13 +18,13 @@ */ import { useCallback, + useDeferredValue, useEffect, useState, useRef, type ChangeEvent, useMemo, } from 'react'; -import { useDebounceValue } from 'src/hooks/useDebounceValue'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import { styled, css, useTheme } from '@apache-superset/core/theme'; import { t } from '@apache-superset/core/translation'; @@ -314,7 +314,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { }, [sortedTreeData, sortedTables]); const [searchTerm, setSearchTerm] = useState(''); - const debouncedSearchTerm = useDebounceValue(searchTerm); + const deferredSearchTerm = useDeferredValue(searchTerm); const handleSearchChange = useCallback( ({ target }: ChangeEvent) => setSearchTerm(target.value), [], @@ -372,9 +372,9 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { // Check if any nodes match the search term const hasMatchingNodes = useMemo(() => { - if (!debouncedSearchTerm) return true; + if (!deferredSearchTerm) return true; - const lowerTerm = debouncedSearchTerm.toLowerCase(); + const lowerTerm = deferredSearchTerm.toLowerCase(); const checkNode = (node: TreeNodeData): boolean => { if (node.type === 'empty') return false; @@ -386,7 +386,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { }; return displayTreeData.some(node => checkNode(node)); - }, [debouncedSearchTerm, displayTreeData]); + }, [deferredSearchTerm, displayTreeData]); // Node renderer for react-arborist const renderNode = useCallback( @@ -395,7 +395,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { {...props} manuallyOpenedNodes={manuallyOpenedNodes} loadingNodes={loadingNodes} - searchTerm={debouncedSearchTerm} + searchTerm={deferredSearchTerm} catalog={catalog} pinnedTableKeys={pinnedTableKeys} pinnedSchemas={pinnedSchemas} @@ -425,7 +425,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { toggleSortColumns, loadingNodes, manuallyOpenedNodes, - debouncedSearchTerm, + deferredSearchTerm, ], ); @@ -484,7 +484,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { return ; } - if (debouncedSearchTerm && !hasMatchingNodes) { + if (deferredSearchTerm && !hasMatchingNodes) { return ( = ({ queryEditorId }) => { height={height || 500} rowHeight={ROW_HEIGHT} indent={16} - searchTerm={debouncedSearchTerm} + searchTerm={deferredSearchTerm} searchMatch={searchMatch} disableDrag disableDrop @@ -527,7 +527,7 @@ const TableExploreTree: React.FC = ({ queryEditorId }) => { // react-arborist marks all schemas as open (isOpen=true) even before any // user interaction. Using treeRef in that case would treat every first // click as a close action, so fall back to manuallyOpenedNodes instead. - const wasOpen = debouncedSearchTerm + const wasOpen = deferredSearchTerm ? (treeRef.current?.get(id)?.isOpen ?? manuallyOpenedNodes[id] ?? false)