Renders spinners on loading tabs

app/assets/javascripts/repo/repo_bundle.js

@@ -2,6 +2,7 @@ import Tabs from './repo_tabs'
 import Sidebar from './repo_sidebar'
 import Editor from './repo_editor'
 import BinaryViewer from './repo_binary_viewer'
+import ViewToggler from './repo_view_toggler'
 import Service from './repo_service'
 import Store from './repo_store'
 import Helper from './repo_helper'
@@ -14,6 +15,7 @@ export default class RepoBundle {
     Store.tabs = new Tabs();
     Store.sidebar = new Sidebar(url);
     Store.editor = new Editor();
+    Store.toggler = new ViewToggler();
     Store.binaryViewer = new BinaryViewer();
     Helper.getContent();
   }

app/assets/javascripts/repo/repo_editor.js

@@ -42,7 +42,7 @@ export default class RepoEditor {
 
       watch: {
         isTree() {
-          if(this.isTree && !this.openedFiles.length) {
+          if(this.isTree || !this.openedFiles.length) {
             self.el.style.display = 'none';
           } else {
             self.el.style.display = 'inline-block';
@@ -50,10 +50,9 @@ export default class RepoEditor {
         },
 
         openedFiles() {
-          if((this.isTree && !this.openedFiles.length) || this.binary) {
+          if((this.isTree || !this.openedFiles.length) || this.binary) {
             self.el.style.display = 'none';
           } else {
-            console.log('inline-block');
             self.el.style.display = 'inline-block';
           }
         },
@@ -62,7 +61,6 @@ export default class RepoEditor {
           if(this.binary) {
             self.el.style.display = 'none';
           } else {
-            console.log('inline-block2');
             self.el.style.display = 'inline-block'; 
           }
           if(!this.isTree) {

app/assets/javascripts/repo/repo_file.js

 let RepoFile = {
   template: `
-  <tr>
+  <tr v-if='!loading.tree || hasFiles'>
     <td>
       <i class='fa' :class='file.icon' :style='{"margin-left": file.level * 10 + "px"}'></i>
       <a :href='file.url' @click.prevent='linkClicked(file)' :title='file.url'>{{file.name}}</a>
@@ -17,7 +17,9 @@ let RepoFile = {
     name: 'repo-file',
     file: Object,
     isTree: Boolean,
-    isMini: Boolean
+    isMini: Boolean,
+    loading: Object,
+    hasFiles: Boolean
   },
 
   methods: {

app/assets/javascripts/repo/repo_helper.js

@@ -75,11 +75,14 @@ let RepoHelper = {
     } else {
       Store.blobRaw = file.plain;
     }
-    this.toURL(file.url);
+    if(!file.loading){
+      this.toURL(file.url);  
+    }
     Store.binary = file.binary;
   },
 
   removeFromOpenedFiles(file) {
+    console.log('file remove', file)
     if(file.type === 'tree') return;
     Store.openedFiles = Store.openedFiles.filter((openedFile) => {
       return openedFile.url !== file.url;
@@ -115,11 +118,44 @@ let RepoHelper = {
     });
   },
 
+  toggleFakeTab(loading, file) {
+    if(loading) {
+      const randomURL = this.Time.now();
+      const newFakeFile = {
+        active: false,
+        binary: true,
+        type: 'blob',
+        loading: true,
+        mime_type:'loading',
+        name: 'loading',
+        url: randomURL
+      };
+      Store.openedFiles.push(newFakeFile);
+      return newFakeFile;
+    } else {
+      this.removeFromOpenedFiles(file);
+      return null;
+    }
+  },
+
+  setLoading(loading, file) {
+    if(Service.url.indexOf('tree') > -1) {
+      Store.loading.tree = loading;
+    } else if(Service.url.indexOf('blob') > -1) {
+      Store.loading.blob = loading;
+      return this.toggleFakeTab(loading, file);
+    }
+  },
+
     // may be tree or file.
   getContent(file) {
+    const loadingData = this.setLoading(true);
+    console.log('loading data', loadingData)
     Service.getContent()
     .then((response) => {
+      console.log('loadddd')
       let data = response.data;
+      this.setLoading(false, loadingData);
       Store.isTree = this.isTree(data);
       if(!Store.isTree) {
         // it's a blob
@@ -149,10 +185,12 @@ let RepoHelper = {
         let newDirectory = this.dataToListOfFiles(data);
         Store.files = this.insertNewFilesIntoParentDir(file, Store.files, newDirectory);
         Store.prevURL = this.blobURLtoParent(Service.url);
+        console.log('Store.prevURL',Store.prevURL);
       }
     })
     .catch((response)=> {
-      console.log('error response', response);
+      this.setLoading(false, loadingData);
+      new Flash('Unable to load the file at this time.')
     });
   },
 

app/assets/javascripts/repo/repo_loading_file.js

+let RepoLoadingFile = {
+  template: `
+  <tr v-if='loading.tree && !hasFiles'>
+    <td>
+      <div class="animation-container animation-container-small">
+        <div class="line-of-code-1"></div>
+        <div class="line-of-code-2"></div>
+        <div class="line-of-code-3"></div>
+        <div class="line-of-code-4"></div>
+        <div class="line-of-code-5"></div>
+        <div class="line-of-code-6"></div>
+      </div>
+    </td>
+    <td v-if="!isMini">
+      <div class="animation-container">
+        <div class="line-of-code-1"></div>
+        <div class="line-of-code-2"></div>
+        <div class="line-of-code-3"></div>
+        <div class="line-of-code-4"></div>
+        <div class="line-of-code-5"></div>
+        <div class="line-of-code-6"></div>
+      </div>
+    </td>
+    <td v-if="!isMini">
+      <div class="animation-container animation-container-small">
+        <div class="line-of-code-1"></div>
+        <div class="line-of-code-2"></div>
+        <div class="line-of-code-3"></div>
+        <div class="line-of-code-4"></div>
+        <div class="line-of-code-5"></div>
+        <div class="line-of-code-6"></div>
+      </div>
+    </td>
+  </tr>
+  `,
+  props: {
+    loading: Object,
+    hasFiles: Boolean,
+    isMini: Boolean
+  }
+};
+export default RepoLoadingFile;
\ No newline at end of file

app/assets/javascripts/repo/repo_sidebar.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 import Store from './repo_store'
 import RepoPreviousDirectory from './repo_prev_directory'
 import RepoFile from './repo_file'
+import RepoLoadingFile from './repo_loading_file'
 import RepoMiniMixin from './repo_mini_mixin'
 
 export default class RepoSidebar {
@@ -20,6 +21,7 @@ export default class RepoSidebar {
       components: {
         'repo-previous-directory': RepoPreviousDirectory,
         'repo-file': RepoFile,
+        'repo-loading-file': RepoLoadingFile,
       },
 
       created() {

app/assets/javascripts/repo/repo_store.js

@@ -18,6 +18,10 @@ let RepoStore = {
   scrollWidth: 0,
   binaryTypes: {
     png: false
+  },
+  loading: {
+    tree: false,
+    blob: false
   }
 };
 export default RepoStore;

app/assets/javascripts/repo/repo_tab.js

@@ -3,10 +3,11 @@ import RepoHelper from './repo_helper'
 let RepoTab = {
   template: `
   <li>
-    <a href='#' @click.prevent='xClicked(tab)'>
-      <i class="fa fa-times" :class="{'fa-times':saved, 'dot-circle-o': !saved}"></i>
+    <a href='#' @click.prevent='xClicked(tab)' v-if='!tab.loading'>
+      <i class='fa fa-times' :class="{'fa-times':saved, 'dot-circle-o': !saved}"></i>
     </a>
-    <a href='#' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
+    <a href='#' v-if='!tab.loading' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
+    <i v-if='tab.loading' class='fa fa-spinner fa-spin'></i>
   </li>
   `,
   props: {

app/assets/javascripts/repo/repo_tabs.js

@@ -23,6 +23,5 @@ export default class RepoTabs {
   styleTabsForWindows() {
     const scrollWidth = Number(document.body.dataset.scrollWidth);
     Store.scrollWidth = scrollWidth;
-    console.log(Store.scrollWidth)
   }
 }
\ No newline at end of file

app/assets/javascripts/repo/repo_view_toggler.js

+import Service from './repo_service'
+import Vue from 'vue'
+import Store from './repo_store'
+
+export default class RepoViewToggler {
+  constructor() {
+    this.initVue();
+  }
+
+  initVue() {
+    this.vue = new Vue({
+      el: '#view-toggler',
+
+      data: () => Store,
+    });
+  }
+}
\ No newline at end of file

app/assets/stylesheets/pages/repo.scss

@@ -42,6 +42,7 @@ header {
     overflow-x: scroll;
 
     li {
+      -webkit-animation: fadein 0.5s;
       list-style-type: none;
       background: $gray-normal;
       display: inline-block;
@@ -69,6 +70,15 @@ header {
   }  
 }
 
+#view-toggler {
+  height: 41px;
+  position: relative;
+  display: block;
+  border-bottom: 1px solid $white-normal;
+  background: white;
+  margin-top: -5px;
+}
+
 #binary-viewer {
   img {
     max-width: 100%;
@@ -76,6 +86,7 @@ header {
 }
 
 #sidebar {
+
   &.sidebar-mini {
     display: inline-block;
     vertical-align: top;
@@ -85,6 +96,10 @@ header {
     overflow: auto;
   }
 
+  tr {
+    -webkit-animation: fadein 0.5s;
+  }
+
   a {
     color: $almost-black;
   }
@@ -107,4 +122,85 @@ header {
   }
 }
   
+}
+
+.animation-container {
+  background: #f6f7f9;
+  height: 40px;
+  overflow: hidden;
+  position: relative;
+
+  &.animation-container-small {
+    height: 12px;
+  }
+  
+  &::before {
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: blockTextShine;
+    -webkit-animation-timing-function: linear;
+    background-image: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
+    background-repeat: no-repeat;
+    background-size: 800px 45px;
+    content: ' ';
+    display: block;
+    height: 100%;
+    position: relative;
+  }
+  
+  div {
+    background: #fff;
+    height: 6px;
+    left: 0;
+    position: absolute;
+    right: 0
+  }
+  
+  .line-of-code-1 {
+    left: 0;
+    top: 8px;
+  }
+  
+  .line-of-code-2 {
+    left: 150px;
+    top: 0px;
+    height: 10px;
+  }
+  
+  .line-of-code-3 {
+    left: 0;
+    top: 23px;
+  }
+  
+  .line-of-code-4 {
+    left: 0;
+    top: 38px;
+  }
+  
+  .line-of-code-5 {
+    left: 200px;
+    top: 28px;
+    height: 10px;
+  }
+  
+  .line-of-code-6 {
+    top: 14px;
+    left: 230px;
+    height: 10px;
+  }
+}
+
+@-webkit-keyframes blockTextShine {
+    0% {
+        transform: translateX(-468px)
+    }
+    100% {
+        transform: translateX(468px)
+    }
+}
+
+@-webkit-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
\ No newline at end of file

app/controllers/concerns/renders_blob.rb

@@ -18,6 +18,7 @@ module RendersBlob
         binary: true,
         mime_type: blob.mime_type,
         name: blob.name,
+        extension: blob.extension,
         size: blob.size
       }
     else
@@ -25,6 +26,7 @@ module RendersBlob
         html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false),
         plain: blob.data,
         name: blob.name,
+        extension: blob.extension,
         size: blob.size,
         mime_type: blob.mime_type
       }

app/views/projects/_files.html.haml

@@ -3,6 +3,5 @@
 - project = local_assigns.fetch(:project) { @project }
 #tree-holder.tree-holder.clearfix
   .nav-block
-    = render 'projects/tree/tree_header', tree: @tree
-
+    = render 'projects/tree/tree_header'
   = render 'projects/tree/tree_content'

app/views/projects/tree/_tree_content.html.haml

 .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"}