diff --git a/src/components/proxy/proxy-groups.tsx b/src/components/proxy/proxy-groups.tsx index 1db0d7cd1..63a3bb2de 100644 --- a/src/components/proxy/proxy-groups.tsx +++ b/src/components/proxy/proxy-groups.tsx @@ -184,9 +184,14 @@ export const ProxyGroups = (props: Props) => { const rangeExtractor = useCallback( (range: Parameters[0]) => { - const activeStickyIndex = [...stickyGroupIndexes] - .reverse() - .find((index) => index <= range.startIndex) + let activeStickyIndex: number | undefined + for (let i = stickyGroupIndexes.length - 1; i >= 0; i -= 1) { + const index = stickyGroupIndexes[i] + if (index <= range.startIndex) { + activeStickyIndex = index + break + } + } activeStickyIndexRef.current = activeStickyIndex ?? null const indexes = defaultRangeExtractor(range) @@ -201,7 +206,7 @@ export const ProxyGroups = (props: Props) => { count: renderList.length, getScrollElement: () => parentRef.current, estimateSize: () => 56, - overscan: 15, + overscan: 8, getItemKey: (index) => renderList[index]?.key ?? index, rangeExtractor, }) diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx index 6e25270a9..e630293a4 100644 --- a/src/components/proxy/proxy-render.tsx +++ b/src/components/proxy/proxy-render.tsx @@ -13,7 +13,7 @@ import { Chip, Tooltip, } from '@mui/material' -import { useMemo } from 'react' +import { memo, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { useIconCache } from '@/hooks/use-icon-cache' @@ -39,7 +39,7 @@ interface RenderProps { ) => void } -export const ProxyRender = (props: RenderProps) => { +export const ProxyRender = memo(function ProxyRender(props: RenderProps) { const { t } = useTranslation() const { indent, @@ -227,7 +227,7 @@ export const ProxyRender = (props: RenderProps) => { } return null -} +}) const StyledPrimary = styled('span')` font-size: 16px;