perf(proxies): optimize virtual list scrolling

src/components/proxy/proxy-groups.tsx

@@ -184,9 +184,14 @@ export const ProxyGroups = (props: Props) => {
 
   const rangeExtractor = useCallback(
     (range: Parameters<typeof defaultRangeExtractor>[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,
   })

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;