diff --git a/web_src/js/features/repo-view-file-tree-sidebar.ts b/web_src/js/features/repo-view-file-tree-sidebar.ts
index d1404e3781..790f5ef619 100644
--- a/web_src/js/features/repo-view-file-tree-sidebar.ts
+++ b/web_src/js/features/repo-view-file-tree-sidebar.ts
@@ -28,10 +28,10 @@ async function toggleSidebar(visibility) {
   });
 }
 
-async function loadChildren(item?) {
+async function loadChildren(item, recursive?: boolean) {
   const el = document.querySelector('#view-file-tree');
   const apiBaseUrl = el.getAttribute('data-api-base-url');
-  const response = await GET(`${apiBaseUrl}/contents/${item ? item.path : ''}`);
+  const response = await GET(`${apiBaseUrl}/tree/${item ? item.path : ''}?recursive=${recursive ?? false}`);
   const json = await response.json();
   if (json instanceof Array) {
     return json.map((i) => ({
@@ -44,26 +44,6 @@ async function loadChildren(item?) {
   return null;
 }
 
-async function loadRecursive(treePath) {
-  let root = null;
-  let parent = null;
-  let parentPath = '';
-  for (const i of (`/${treePath}`).split('/')) {
-    const path = `${parentPath}${parentPath ? '/' : ''}${i}`;
-    const result = await loadChildren({path});
-    if (root === null) {
-      root = result;
-      parent = root;
-    } else {
-      parent = parent.find((item) => item.path === path);
-      parent.children = result;
-      parent = result;
-    }
-    parentPath = path;
-  }
-  return root;
-}
-
 async function loadContent(item) {
   document.querySelector('.repo-home-filelist').innerHTML = `load content of ${item.path}`;
 }
@@ -84,7 +64,7 @@ export async function initViewFileTreeSidebar() {
   const treePath = fileTree.getAttribute('data-tree-path');
   const selectedItem = ref(treePath);
 
-  const files = await loadRecursive(treePath);
+  const files = await loadChildren({path: treePath}, true);
 
   fileTree.classList.remove('center');
   const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {