diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 70678b0db37f390fb994feea011eacaaff423d5e..8e7529899c098b0df08259bbabfc1b073cf4e6f4 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -90,7 +90,7 @@ export default {
 
 <template>
   <div class="info-well d-none d-sm-flex project-last-commit commit p-3">
-    <gl-loading-icon v-if="isLoading" size="md" class="m-auto" />
+    <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
     <template v-else>
       <user-avatar-link
         v-if="commit.author"
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index 6b3822151ff7ae25f107d4490e3dd5fd55d61049..2bc93c3f1c1defdfc183f9b017b70565d8da8517 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -44,7 +44,7 @@ export default {
       </div>
     </div>
     <div class="blob-viewer">
-      <gl-loading-icon v-if="loading > 0" size="md" class="my-4 mx-auto" />
+      <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
       <div v-else-if="readme" v-html="readme.html"></div>
     </div>
   </article>
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 8f2e9264bcab1166242d5c741f021e48a3a38357..29a3340b83d5426a284dd90804534f722ca551e3 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -34,6 +34,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -69,7 +74,12 @@ export default {
       <table :aria-label="tableCaption" class="table tree-table qa-file-tree" aria-live="polite">
         <table-header v-once />
         <tbody>
-          <parent-row v-show="showParentRow" :commit-ref="ref" :path="path" />
+          <parent-row
+            v-show="showParentRow"
+            :commit-ref="ref"
+            :path="path"
+            :loading-path="loadingPath"
+          />
           <template v-for="val in entries">
             <table-row
               v-for="entry in val"
@@ -84,6 +94,7 @@ export default {
               :url="entry.webUrl"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
+              :loading-path="loadingPath"
             />
           </template>
           <template v-if="isLoading">
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 3c39f4042266fd3b4c9e7889005c3a7aa375a1f5..70a188f98cc7946100dcb2e6a8711cc3c6c6bc40 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     commitRef: {
       type: String,
@@ -9,13 +14,21 @@ export default {
       type: String,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
-    parentRoute() {
+    parentPath() {
       const splitArray = this.path.split('/');
       splitArray.pop();
 
-      return { path: `/tree/${this.commitRef}/${splitArray.join('/')}` };
+      return splitArray.join('/');
+    },
+    parentRoute() {
+      return { path: `/tree/${this.commitRef}/${this.parentPath}` };
     },
   },
   methods: {
@@ -29,7 +42,13 @@ export default {
 <template>
   <tr class="tree-item">
     <td colspan="3" class="tree-item-file-name" @click.self="clickRow">
-      <router-link :to="parentRoute" :aria-label="__('Go to parent')">
+      <gl-loading-icon
+        v-if="parentPath === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom"
+      />
+      <router-link v-else :to="parentRoute" :aria-label="__('Go to parent')">
         ..
       </router-link>
     </td>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index cf0457a2abfbb4e7ebb2ae27de10ca891ff7dae7..a8e13241c3724a1e2fab78936efe07954a6db633 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -12,6 +12,7 @@ export default {
     GlBadge,
     GlLink,
     GlSkeletonLoading,
+    GlLoadingIcon,
     TimeagoTooltip,
     Icon,
   },
@@ -76,6 +77,11 @@ export default {
       required: false,
       default: null,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -125,7 +131,13 @@ export default {
 <template>
   <tr :class="`file_${id}`" class="tree-item" @click="openRow">
     <td class="tree-item-file-name">
-      <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
+      <gl-loading-icon
+        v-if="path === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom fa-fw"
+      />
+      <i v-else :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
       <component :is="linkComponent" :to="routerLinkTo" :href="url" class="str-truncated">
         {{ fullPath }}
       </component>
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index 949e653fc8f38c4123685adfd408cfbac33c5732..c30d6f05c6a6273943082184fd422909f8a41fc3 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -27,6 +27,11 @@ export default {
       required: false,
       default: '/',
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -109,7 +114,12 @@ export default {
 
 <template>
   <div>
-    <file-table :path="path" :entries="entries" :is-loading="isLoadingFiles" />
+    <file-table
+      :path="path"
+      :entries="entries"
+      :is-loading="isLoadingFiles"
+      :loading-path="loadingPath"
+    />
     <file-preview v-if="readme" :blob="readme" />
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js
new file mode 100644
index 0000000000000000000000000000000000000000..e68996245a89475e96abb2ae8cb921de67f8eaaa
--- /dev/null
+++ b/app/assets/javascripts/repository/mixins/preload.js
@@ -0,0 +1,36 @@
+import getFiles from '../queries/getFiles.query.graphql';
+import getRefMixin from './get_ref';
+import getProjectPath from '../queries/getProjectPath.query.graphql';
+
+export default {
+  mixins: [getRefMixin],
+  apollo: {
+    projectPath: {
+      query: getProjectPath,
+    },
+  },
+  data() {
+    return { projectPath: '', loadingPath: null };
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.preload(to.params.pathMatch, next);
+  },
+  methods: {
+    preload(path, next) {
+      this.loadingPath = path.replace(/^\//, '');
+
+      return this.$apollo
+        .query({
+          query: getFiles,
+          variables: {
+            projectPath: this.projectPath,
+            ref: this.ref,
+            path: this.loadingPath,
+            nextPageCursor: '',
+            pageSize: 100,
+          },
+        })
+        .then(() => next());
+    },
+  },
+};
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
index dd4d437f4ddf9ccb074bd5c905945a348ed59f9e..adc332fa370ecff7f51f370c479cc6226c38b027 100644
--- a/app/assets/javascripts/repository/pages/tree.vue
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -1,11 +1,13 @@
 <script>
 import TreeContent from '../components/tree_content.vue';
 import { updateElementsVisibility } from '../utils/dom';
+import preloadMixin from '../mixins/preload';
 
 export default {
   components: {
     TreeContent,
   },
+  mixins: [preloadMixin],
   props: {
     path: {
       type: String,
@@ -34,5 +36,5 @@ export default {
 </script>
 
 <template>
-  <tree-content :path="path" />
+  <tree-content :path="path" :loading-path="loadingPath" />
 </template>
diff --git a/ee/spec/features/projects/path_locks_spec.rb b/ee/spec/features/projects/path_locks_spec.rb
index 877543a95c267b365ca1fd02d044524db850e200..a713a3086a7d447b7448b9971c4d41629163739f 100644
--- a/ee/spec/features/projects/path_locks_spec.rb
+++ b/ee/spec/features/projects/path_locks_spec.rb
@@ -22,7 +22,8 @@
     within '.tree-content-holder' do
       click_link "encoding"
     end
-    click_link "Lock"
+
+    find('.js-path-lock').click
 
     expect(page).to have_link('Unlock')
   end
diff --git a/spec/features/projects/files/user_browses_files_spec.rb b/spec/features/projects/files/user_browses_files_spec.rb
index 657513431e58f49668467959155f64736d2a2db8..b8efabb0cabc185aa7fa915d1c32390f64606645 100644
--- a/spec/features/projects/files/user_browses_files_spec.rb
+++ b/spec/features/projects/files/user_browses_files_spec.rb
@@ -41,6 +41,11 @@
 
     it "shows the `Browse Directory` link" do
       click_link("files")
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link("History")
 
       expect(page).to have_link("Browse Directory").and have_no_link("Browse Code")
diff --git a/spec/features/projects/files/user_browses_lfs_files_spec.rb b/spec/features/projects/files/user_browses_lfs_files_spec.rb
index 618290416bd3aeaa11e5985ad8dd652b039eceb9..dbeec973865a6502754674cdba01907e970d4ae7 100644
--- a/spec/features/projects/files/user_browses_lfs_files_spec.rb
+++ b/spec/features/projects/files/user_browses_lfs_files_spec.rb
@@ -19,7 +19,17 @@
 
     it 'is possible to see raw content of LFS pointer' do
       click_link 'files'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link 'lfs'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('lfs')
+      end
+
       click_link 'lfs_object.iso'
 
       expect(page).to have_content 'version https://git-lfs.github.com/spec/v1'
@@ -38,6 +48,11 @@
 
     it 'shows an LFS object' do
       click_link('files')
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link('lfs')
       click_link('lfs_object.iso')
 
diff --git a/spec/frontend/repository/components/table/parent_row_spec.js b/spec/frontend/repository/components/table/parent_row_spec.js
index 7020055271fb9abf0c64d225d2d4c627e6694d4e..439c7ff080cae5a2003b279ce0a1c7e7466c3d58 100644
--- a/spec/frontend/repository/components/table/parent_row_spec.js
+++ b/spec/frontend/repository/components/table/parent_row_spec.js
@@ -1,10 +1,11 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import ParentRow from '~/repository/components/table/parent_row.vue';
 
 let vm;
 let $router;
 
-function factory(path) {
+function factory(path, loadingPath) {
   $router = {
     push: jest.fn(),
   };
@@ -13,6 +14,7 @@ function factory(path) {
     propsData: {
       commitRef: 'master',
       path,
+      loadingPath,
     },
     stubs: {
       RouterLink: RouterLinkStub,
@@ -61,4 +63,10 @@ describe('Repository parent row component', () => {
       path: '/tree/master/app',
     });
   });
+
+  it('renders loading icon when loading parent', () => {
+    factory('app/assets', 'app');
+
+    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+  });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 067bad0dab633442e7299ced21937c9f832d008e..b60560366a667460576884b3dc053d2f5cded302 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlBadge, GlLink } from '@gitlab/ui';
+import { GlBadge, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TableRow from '~/repository/components/table/row.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -198,4 +198,17 @@ describe('Repository table row component', () => {
       expect(vm.find(Icon).exists()).toBe(true);
     });
   });
+
+  it('renders loading icon when path is loading', () => {
+    factory({
+      id: '1',
+      sha: '1',
+      path: 'test',
+      type: 'tree',
+      currentPath: '/',
+      loadingPath: 'test',
+    });
+
+    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+  });
 });