diff --git a/app/src/components/files/FileTree.tsx b/app/src/components/files/FileTree.tsx index 90c6572..6b3ce1c 100644 --- a/app/src/components/files/FileTree.tsx +++ b/app/src/components/files/FileTree.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState, useLayoutEffect, useCallback } from 'react'; +import React, { useRef, useState, useCallback } from 'react'; import { Tree, type NodeApi } from 'react-arborist'; import { IconFile, @@ -23,15 +23,11 @@ interface FileTreeProps { loadFileList: () => Promise; } -const useSize = (target: React.RefObject): Size | undefined => { +const useSize = ( + target: React.RefObject +): Size | undefined => { const [size, setSize] = useState(); - useLayoutEffect(() => { - if (target.current) { - setSize(target.current.getBoundingClientRect()); - } - }, [target]); - useResizeObserver(target, (entry) => setSize(entry.contentRect)); return size; }; diff --git a/app/src/components/files/FolderSelector.tsx b/app/src/components/files/FolderSelector.tsx index c841e23..2c19dba 100644 --- a/app/src/components/files/FolderSelector.tsx +++ b/app/src/components/files/FolderSelector.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useLayoutEffect, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { Box } from '@mantine/core'; import { Tree, type NodeApi } from 'react-arborist'; import { @@ -21,15 +21,11 @@ interface Size { height: number; } -const useSize = (target: React.RefObject): Size | undefined => { +const useSize = ( + target: React.RefObject +): Size | undefined => { const [size, setSize] = useState(); - useLayoutEffect(() => { - if (target.current) { - setSize(target.current.getBoundingClientRect()); - } - }, [target]); - useResizeObserver(target, (entry) => setSize(entry.contentRect)); return size; }; @@ -239,7 +235,10 @@ export const FolderSelector: React.FC = ({ }} > {/* Root option */} - onSelect('')} /> + onSelect('')} + /> {/* Folder tree */} {size && folders.length > 0 && ( @@ -255,7 +254,11 @@ export const FolderSelector: React.FC = ({ disableDrop={() => true} > {(props) => ( - + )} )}