Renders spinners on loading tabs

1 files changed, 7 insertions, 4 deletions

diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index c8b41a93739..76a5dc441b0 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -1,5 +1,5 @@
 .tree-content-holder
-  #sidebar{ ":class" => "{'sidebar-mini' : isMini}" }<
+  #sidebar{ ":class" => "{'sidebar-mini' : isMini}", "v-cloak" => "1" }<
     %table.table
       %thead{"v-if" => "!isMini"}
         %th{"v-if" => "!isMini"}
@@ -10,11 +10,14 @@
           Last Commit
         %th{"v-if" => "!isMini"}
           Last Update
-      %tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
-      %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree" }
+      %tbody
+        %tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
+        %tr{ is: "repo-loading-file", "v-for" => "n in 5", ":loading" => "loading", ":has-files" => "!!files.length", ":is-mini" => "isMini"}
+        %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":loading" => "loading", ":has-files" => "!!files.length" }
   .panel-right>
-    %ul#tabs{"v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}"}
+    %ul#tabs{"v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}", "v-cloak" => "1"}
       %li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }
+    #view-toggler
     #ide{ data: { url: repo_url } }
     #binary-viewer{ "v-if" => "binary" }
       %img{"v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI"}