change loading

Author: kerwin612

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>

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;

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;