diff --git a/templates/repo/view_file_tree_sidebar.tmpl b/templates/repo/view_file_tree_sidebar.tmpl
index 7c3c5e6de5..26d53554e6 100644
--- a/templates/repo/view_file_tree_sidebar.tmpl
+++ b/templates/repo/view_file_tree_sidebar.tmpl
@@ -59,7 +59,5 @@
 	</div>
 </div>
 <div class="view-file-tree-sidebar-bottom">
-	<div id="view-file-tree" class="center" data-api-base-url="{{.RepoLink}}" data-tree-path="{{$.TreePath}}">
-		{{svg "octicon-sync" 16 "job-status-rotate"}}
-	</div>
+	<div id="view-file-tree" class="is-loading" data-api-base-url="{{.RepoLink}}" data-tree-path="{{$.TreePath}}"></div>
 </div>
diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css
index 20964bcb6a..7798318dab 100644
--- a/web_src/css/repo/home.css
+++ b/web_src/css/repo/home.css
@@ -62,6 +62,10 @@
   grid-row: 1 / 4;
 }
 
+#view-file-tree.is-loading {
+  aspect-ratio: 5.415; /* the size is about 790 x 145 */
+}
+
 .repo-grid-tree-sidebar .repo-view-file-tree-sidebar {
   display: flex;
   flex-direction: column;
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 790f5ef619..b57249d041 100644
--- a/web_src/js/features/repo-view-file-tree-sidebar.ts
+++ b/web_src/js/features/repo-view-file-tree-sidebar.ts
@@ -66,7 +66,7 @@ export async function initViewFileTreeSidebar() {
 
   const files = await loadChildren({path: treePath}, true);
 
-  fileTree.classList.remove('center');
+  fileTree.classList.remove('is-loading');
   const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
     window.history.pushState(null, null, item.htmlUrl);
     selectedItem.value = item.path;