Fixed #590 scrolling irregularities in deeply nested filetree

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>
aboutcode-org · Sep 2, 2023 · 0d8163c · 0d8163c
1 parent 989e44d
commit 0d8163c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/src/components/FileTree/FileTree.css b/src/components/FileTree/FileTree.css
@@ -18,7 +18,7 @@
 }
 
 .filetree-node-wrapper {
-  scroll-margin-left: 150px;
+  scroll-margin-left: 50px;
   scroll-margin-top: 150px;
   scroll-margin-bottom: 150px;
 }

diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
@@ -1,6 +1,6 @@
 import RcTree from "rc-tree";
 import { Key } from "rc-tree/lib/interface";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Element } from "react-scroll";
 
 import EllipticLoader from "../EllipticLoader";
@@ -10,6 +10,8 @@ import { FileDataNode } from "../../services/workbenchDB";
 
 import "./FileTree.css";
 
+const FOCUS_ATTEMPT_DELAY = 500;
+
 const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
   const {
     db,
@@ -22,26 +24,38 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
   const [treeData, setTreeData] = useState<FileDataNode[] | null>(null);
   const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    if (currentPath.length === 0) return;
+
     setExpandedKeys((keys) => {
       return [...keys, currentPath.substring(0, currentPath.lastIndexOf("/"))];
     });
-    if (currentPath.length) {
-      setTimeout(() => {
-        const targetNode = document.getElementsByName(currentPath)[0];
-        if (targetNode) {
+
+    // Timeout ensures that targetNode is accessed only after its rendered
+    let pendingTimeoutId: NodeJS.Timeout;
+    pendingTimeoutId = setTimeout(() => {
+      const targetNode = document.getElementsByName(currentPath)[0];
+      if (targetNode) {
+        pendingTimeoutId = setTimeout(() => {
           targetNode.scrollIntoView({
             behavior: "smooth",
             block: "nearest",
             inline: "start",
           });
-        }
-      }, 1500);
-    }
+        }, FOCUS_ATTEMPT_DELAY);
+      }
+    });
+
+    return () => {
+      clearTimeout(pendingTimeoutId);
+    };
   }, [currentPath]);
 
   useEffect(() => {
-    if (!initialized || !db || !importedSqliteFilePath) return;
+    if (!initialized || !db || !importedSqliteFilePath) {
+      setTreeData(null);
+      return;
+    }
 
     db.findAllJSTree().then((treeData) => {
       // Wrap with react-scroll wrapper
@@ -98,10 +112,7 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         selectedKeys={[currentPath]}
         onSelect={(keys, info) => {
           if (keys && keys[0]) {
-            selectPath(
-              keys[0].toString(),
-              (info.node as any as FileDataNode).type as PathType
-            );
+            selectPath(keys[0].toString(), info.node.type as PathType);
           }
         }}
         motion={{