diff --git a/.changeset/angry-scissors-flow.md b/.changeset/angry-scissors-flow.md new file mode 100644 index 00000000..cca7e8d9 --- /dev/null +++ b/.changeset/angry-scissors-flow.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +fix: memoize inputs to fix text input performance diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx index 0b046214..96bd604c 100644 --- a/packages/app/src/DBSearchPage.tsx +++ b/packages/app/src/DBSearchPage.tsx @@ -1208,9 +1208,12 @@ function DBSearchPage() { ); // Parse the orderBy string into a SortingState. We need the string // version in other places so we keep this parser separate. - const orderByConfig = parseAsSortingStateString.parse( - searchedConfig.orderBy ?? '', - ); + const initialSortBy = useMemo(() => { + const orderBy = parseAsSortingStateString.parse( + searchedConfig.orderBy ?? '', + ); + return orderBy ? [orderBy] : []; + }, [searchedConfig.orderBy]); const handleTimeRangeSelect = useCallback( (d1: Date, d2: Date) => { @@ -1824,7 +1827,7 @@ function DBSearchPage() { denoiseResults={denoiseResults} collapseAllRows={collapseAllRows} onSortingChange={onSortingChange} - initialSortBy={orderByConfig ? [orderByConfig] : []} + initialSortBy={initialSortBy} /> )} > diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx index 7a43391b..89d8f632 100644 --- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx +++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx @@ -74,6 +74,17 @@ export default function DBSqlRowTableWithSideBar({ setRowId(null); setRowSource(null); }, [setRowId, setRowSource]); + const renderRowDetails = useCallback( + (r: { [key: string]: unknown }) => { + if (!sourceData) { + return