mirror of
https://github.com/apache/superset.git
synced 2026-05-12 19:35:17 +00:00
perf(sql-lab): use useDeferredValue for schema browser search (#39928)
Co-authored-by: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user