feat: optimize file tree performance

Safari/Gitako

@@ -0,0 +1 @@
+Subproject commit b82c8588b9cc5864c3738f903ac1930ceda5c996

src/analytics.ts

@@ -58,9 +58,9 @@ Sentry.init(sentryOptions)
 
 export const withErrorLog: Middleware = function withErrorLog(method, args) {
   return [
-    async function (...args: any[]) {
+    async function () {
       try {
-        await method.apply(null, args)
+        await method.apply(null, arguments as any)
       } catch (error) {
         raiseError(error)
       }

src/components/FileExplorer.tsx

@@ -46,14 +46,23 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     searched,
   } = props
   const {
-    value: { accessToken, compressSingletonFolder, searchMode, commentToggle, restoreExpandedFolders },
+    value: {
+      accessToken,
+      compressSingletonFolder,
+      searchMode,
+      commentToggle,
+      restoreExpandedFolders,
+    },
   } = useConfigs()
 
   const onSearch = React.useCallback(
     (searchKey: string, searchMode: SearchMode) => {
       updateSearchKey(searchKey)
       if (visibleNodesGenerator) {
-        visibleNodesGenerator.search(searchModes[searchMode].getSearchParams(searchKey), restoreExpandedFolders)
+        visibleNodesGenerator.search(
+          searchModes[searchMode].getSearchParams(searchKey),
+          restoreExpandedFolders,
+        )
       }
     },
     [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
@@ -74,8 +83,8 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
   }, [setUpTree, metaData, compressSingletonFolder, accessToken])
 
   React.useEffect(() => {
-    if (visibleNodes?.focusedNode) focusFileExplorer()
-  })
+    focusFileExplorer()
+  }, [])
 
   const renderActions: ((node: TreeNode) => React.ReactNode) | undefined = React.useMemo(() => {
     const renderGoToButton = (node: TreeNode): React.ReactNode => (

src/driver/core/FileExplorer.ts

@@ -264,8 +264,10 @@ export const toggleNodeExpansion: BoundMethodCreator<
     } = dispatch.get()
     if (!visibleNodesGenerator) return
 
-    visibleNodesGenerator.focusNode(node)
-    await visibleNodesGenerator.toggleExpand(node, recursive)
+    if (node.type === 'tree') {
+      visibleNodesGenerator.focusNode(node)
+      await visibleNodesGenerator.toggleExpand(node, recursive)
+    }
   }
 
 export const focusNode: BoundMethodCreator<[TreeNode | null]> =

src/platforms/GitHub/index.ts

@@ -305,20 +305,29 @@ async function getPullRequestTreeData(
   }
 
   const docs = await API.getPullPageDocuments(userName, repoName, pullId)
+  // query all elements at once to make getFileElementHash run faster
+  const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
   const getFileElementHash = (path: string) => {
-    for (const doc of docs) {
-      const id = doc.querySelector(`*[data-path^="${path}"]`)?.parentElement?.id
-      if (id) return id
+    let e
+    for (const group of elementsHavePath) {
+      for (let i = 0; i < group.length; i++) {
+        const element = group[i]
+        if (element.getAttribute('data-path')?.startsWith(path)) {
+          e = element
+          break
+        }
+      }
+      if (e) break
     }
+    return e?.parentElement?.id
   }
 
+  const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
   const nodes: TreeNode[] = treeData.map(item => ({
     path: item.filename || '',
     type: 'blob',
     name: item.filename?.replace(/^.*\//, '') || '',
-    url: `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${
-      window.location.search
-    }${formatHash(getFileElementHash(item.filename))}`,
+    url: `${urlMainPart}${formatHash(getFileElementHash(item.filename))}`,
     sha: item.sha,
     comments: commentData?.filter(comment => item.filename === comment.path).length,
   }))

src/utils/VisibleNodesGenerator.ts

@@ -273,8 +273,8 @@ class FlattenLayer extends CompressLayer {
     const expand = !this.expandedNodes.has(node.path)
     await traverse(
       [node],
-      async node => {
-        await this.$setExpand(node, expand)
+      node => {
+        this.$setExpand(node, expand)
         return recursive
       },
       node => node.contents || [],