perf(sql-lab): use useDeferredValue for schema browser search (#39928)

Co-authored-by: Claude Code <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
2026-05-11 09:47:24 -07:00
committed by GitHub
parent 1d1a0e6fec
commit eed7098093

View File

@@ -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<Props> = ({ queryEditorId }) => {
}, [sortedTreeData, sortedTables]);
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounceValue(searchTerm);
const deferredSearchTerm = useDeferredValue(searchTerm);
const handleSearchChange = useCallback(
({ target }: ChangeEvent<HTMLInputElement>) => setSearchTerm(target.value),
[],
@@ -372,9 +372,9 @@ const TableExploreTree: React.FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ queryEditorId }) => {
{...props}
manuallyOpenedNodes={manuallyOpenedNodes}
loadingNodes={loadingNodes}
searchTerm={debouncedSearchTerm}
searchTerm={deferredSearchTerm}
catalog={catalog}
pinnedTableKeys={pinnedTableKeys}
pinnedSchemas={pinnedSchemas}
@@ -425,7 +425,7 @@ const TableExploreTree: React.FC<Props> = ({ queryEditorId }) => {
toggleSortColumns,
loadingNodes,
manuallyOpenedNodes,
debouncedSearchTerm,
deferredSearchTerm,
],
);
@@ -484,7 +484,7 @@ const TableExploreTree: React.FC<Props> = ({ queryEditorId }) => {
return <Skeleton active />;
}
if (debouncedSearchTerm && !hasMatchingNodes) {
if (deferredSearchTerm && !hasMatchingNodes) {
return (
<Empty
description={t('No matching results found')}
@@ -501,7 +501,7 @@ const TableExploreTree: React.FC<Props> = ({ 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<Props> = ({ 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)