fix(View): add virtual scroll to resource tree

Author: scottsut

frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/Resource.tsx

@@ -27,6 +27,7 @@ import {
 import { Col, Input, Row } from 'antd';
 import { Tree } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import useResizeObserver from 'app/hooks/useResizeObserver';
 import { useSearchAndExpand } from 'app/hooks/useSearchAndExpand';
 import { DEFAULT_DEBOUNCE_WAIT } from 'globalConstants';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
@@ -59,6 +60,11 @@ export const Resource = memo(() => {
     selectSourceDatabaseSchemas(state, { id: sourceId }),
   );
 
+  const { height, ref: treeWrapperRef } = useResizeObserver({
+    refreshMode: 'debounce',
+    refreshRate: 200,
+  });
+
   const buildTableNode = useCallback((database: DatabaseSchema) => {
     const children =
       database?.tables?.map(table => {
@@ -143,14 +149,15 @@ export const Resource = memo(() => {
           />
         </Col>
       </Searchbar>
-      <TreeWrapper>
+      <TreeWrapper ref={treeWrapperRef}>
         <Tree
           className="medium"
           treeData={filteredData}
           loading={isDatabaseSchemaLoading}
           icon={renderIcon}
           selectable={false}
           defaultExpandedKeys={expandedRowKeys}
+          height={height}
           onExpand={onExpand}
         />
       </TreeWrapper>