diff --git a/apps/docs/src/file-tree/file-view/file-view.tsx b/apps/docs/src/file-tree/file-view/file-view.tsx
index 2f5c9d1..aaf0592 100644
--- a/apps/docs/src/file-tree/file-view/file-view.tsx
+++ b/apps/docs/src/file-tree/file-view/file-view.tsx
@@ -1,6 +1,5 @@
 import type { TreeNode } from '@difizen/mana-app';
 import { FileTreeViewFactory } from '@difizen/mana-app';
-import { TreeViewComponent } from '@difizen/mana-app';
 import { isOSX, FileTreeModel } from '@difizen/mana-app';
 import {
   FileTreeView,
diff --git a/packages/mana-app/src/file-tree/file-tree-component.tsx b/packages/mana-app/src/file-tree/file-tree-component.tsx
new file mode 100644
index 0000000..3ad74b1
--- /dev/null
+++ b/packages/mana-app/src/file-tree/file-tree-component.tsx
@@ -0,0 +1,12 @@
+import 'font-awesome/css/font-awesome.min.css';
+import 'file-icons-js/css/style.css';
+import './file-tree-style.less';
+
+import type { ComponentType } from 'react';
+
+import { TreeViewContent as TreeViewContentInner } from '../tree/view';
+
+export const TreeViewContent: ComponentType<any> = (props: any) => {
+  return <TreeViewContentInner {...props} />;
+};
+export default TreeViewContent;
diff --git a/packages/mana-app/src/file-tree/file-tree-style.less b/packages/mana-app/src/file-tree/file-tree-style.less
new file mode 100644
index 0000000..a56626d
--- /dev/null
+++ b/packages/mana-app/src/file-tree/file-tree-style.less
@@ -0,0 +1 @@
+@import url('~font-awesome/css/font-awesome.min.css');
diff --git a/packages/mana-app/src/file-tree/file-tree-view.tsx b/packages/mana-app/src/file-tree/file-tree-view.tsx
index f34a0dd..1f24f0e 100644
--- a/packages/mana-app/src/file-tree/file-tree-view.tsx
+++ b/packages/mana-app/src/file-tree/file-tree-view.tsx
@@ -2,10 +2,13 @@ import { FileOutlined } from '@ant-design/icons';
 import { Disposable, DisposableCollection, isCancelled } from '@difizen/mana-common';
 import { URI } from '@difizen/mana-common';
 import type { MenuPath } from '@difizen/mana-core';
+import { ViewInstance } from '@difizen/mana-core';
 import { ManaModule, SelectionService, view } from '@difizen/mana-core';
 import { l10n } from '@difizen/mana-l10n'; /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useInject } from '@difizen/mana-observable';
 import { singleton, inject } from '@difizen/mana-syringe';
 import * as React from 'react';
+import { forwardRef, lazy, Suspense } from 'react';
 
 import { LabelProvider } from '../label';
 import { TreeModel } from '../tree';
@@ -20,9 +23,6 @@ import { FileTreeModel } from './file-tree-model';
 import { FileTreeContextMenuPath, URINode } from './file-tree-protocol';
 import { FileStat, FileType } from './files';
 
-import 'font-awesome/css/font-awesome.min.css';
-import 'file-icons-js/css/style.css';
-
 export const FILE_TREE_CLASS = 'mana-file-tree';
 export const FILE_STAT_NODE_CLASS = 'mana-FileStatNode';
 export const DIR_NODE_CLASS = 'mana-DirNode';
@@ -31,12 +31,39 @@ export const FILE_STAT_ICON_CLASS = 'mana-FileStatIcon';
 export const FileTreeViewFactory = 'file-tree-view-fatory';
 import './style/file-icon.less';
 
+const LazyTreeComponent = lazy(() =>
+  import('./file-tree-component.js').then(({ TreeViewContent }) => ({
+    default: TreeViewContent,
+  })),
+);
+
+export const FileTreeViewComponent = forwardRef<HTMLDivElement>(
+  function FileTreeViewComponent(_props, ref) {
+    const treeView = useInject<TreeView>(ViewInstance);
+
+    return (
+      <div
+        ref={ref}
+        onContextMenu={(event) => {
+          treeView.handleContextMenuEvent(event, treeView, undefined);
+        }}
+        {...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
+      >
+        <Suspense fallback={<div>Loading...</div>}>
+          <LazyTreeComponent />
+        </Suspense>
+      </div>
+    );
+  },
+);
+
 export const FileTreeViewModule = ManaModule.create()
   .register(FileTree, FileTreeModel)
   .dependOn(TreeViewModule);
 @singleton()
 @view(FileTreeViewFactory, FileTreeViewModule)
 export class FileTreeView extends TreeView {
+  override view = FileTreeViewComponent;
   override id = FileTreeViewFactory;
   override label = (<FileOutlined />);
   protected readonly toCancelNodeExpansion = new DisposableCollection();
diff --git a/packages/mana-app/src/style/index.less b/packages/mana-app/src/style/index.less
index 3e4dbd7..46c9932 100644
--- a/packages/mana-app/src/style/index.less
+++ b/packages/mana-app/src/style/index.less
@@ -1,6 +1,5 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable custom-property-pattern */
-@import url('~font-awesome/css/font-awesome.min.css');
 
 body,
 .mana-app {
diff --git a/packages/mana-app/src/tree/view/tree-view.tsx b/packages/mana-app/src/tree/view/tree-view.tsx
index 3e623a2..8ec9cbe 100644
--- a/packages/mana-app/src/tree/view/tree-view.tsx
+++ b/packages/mana-app/src/tree/view/tree-view.tsx
@@ -107,72 +107,81 @@ export const TreeViewRow = (props: TreeViewRowProps) => {
     </CellMeasurer>
   );
 };
+export function TreeViewContent() {
+  const treeView = useInject<TreeView>(ViewInstance);
+  const listRef = React.createRef<List>();
+  const cache = React.useMemo(() => {
+    return new CellMeasurerCache({
+      fixedWidth: true,
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (listRef && listRef.current) {
+      if (treeView.isVisible) {
+        cache.clearAll();
+        listRef.current.recomputeRowHeights();
+      } else {
+        listRef.current.forceUpdateGrid();
+      }
+    }
+  }, [treeView.scrollToRow, treeView.isVisible, listRef, cache]);
+
+  const rows = Array.from(treeView.rows.values());
+  const TreeRow = treeView.treeRowComponent;
+  return (
+    <Dropdown
+      className="mana-tree-node-dropdown"
+      trigger={['contextMenu']}
+      visible={!!treeView.contextMenuData}
+      onVisibleChange={(visible) => {
+        if (!visible) {
+          treeView.setContextMenuArgs(undefined);
+        }
+      }}
+      overlay={
+        <MenuRender
+          data={treeView.contextMenuData}
+          menuPath={treeView.contextMenuPath}
+        />
+      }
+    >
+      <div className="mana-tree-content">
+        <List
+          ref={listRef}
+          width={treeView.offsetWidth || 100}
+          height={treeView.offsetHeight || 100}
+          rowCount={rows.length}
+          rowHeight={cache.rowHeight}
+          rowRenderer={(rowProps) => (
+            <TreeRow {...rowProps} cache={cache} row={rows[rowProps.index]} />
+          )}
+          scrollToIndex={treeView.scrollToRow}
+          onScroll={treeView.handleScroll.bind(treeView)}
+          tabIndex={-1}
+          style={{
+            overflow: 'auto',
+          }}
+        />
+      </div>
+    </Dropdown>
+  );
+}
 
 export const TreeViewComponent = forwardRef<HTMLDivElement>(
   function TreeViewComponent(_props, ref) {
     const treeView = useInject<TreeView>(ViewInstance);
-    const listRef = React.createRef<List>();
-    const cache = React.useMemo(() => {
-      return new CellMeasurerCache({
-        fixedWidth: true,
-      });
-    }, []);
-
-    React.useEffect(() => {
-      if (listRef && listRef.current) {
-        if (treeView.isVisible) {
-          cache.clearAll();
-          listRef.current.recomputeRowHeights();
-        } else {
-          listRef.current.forceUpdateGrid();
-        }
-      }
-    }, [treeView.scrollToRow, treeView.isVisible, listRef, cache]);
 
-    const rows = Array.from(treeView.rows.values());
-    const TreeRow = treeView.treeRowComponent;
     return (
-      <Dropdown
-        className="mana-tree-node-dropdown"
-        trigger={['contextMenu']}
-        visible={!!treeView.contextMenuData}
-        onVisibleChange={(visible) => {
-          if (!visible) {
-            treeView.setContextMenuArgs(undefined);
-          }
+      <div
+        ref={ref}
+        onContextMenu={(event) => {
+          treeView.handleContextMenuEvent(event, treeView, undefined);
         }}
-        overlay={
-          <MenuRender
-            data={treeView.contextMenuData}
-            menuPath={treeView.contextMenuPath}
-          />
-        }
+        {...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
       >
-        <div
-          ref={ref}
-          onContextMenu={(event) => {
-            treeView.handleContextMenuEvent(event, treeView, undefined);
-          }}
-          {...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
-        >
-          <List
-            ref={listRef}
-            width={treeView.offsetWidth || 100}
-            height={treeView.offsetHeight || 100}
-            rowCount={rows.length}
-            rowHeight={cache.rowHeight}
-            rowRenderer={(rowProps) => (
-              <TreeRow {...rowProps} cache={cache} row={rows[rowProps.index]} />
-            )}
-            scrollToIndex={treeView.scrollToRow}
-            onScroll={treeView.handleScroll.bind(treeView)}
-            tabIndex={-1}
-            style={{
-              overflow: 'auto',
-            }}
-          />
-        </div>
-      </Dropdown>
+        <TreeViewContent />
+      </div>
     );
   },
 );