1 files changed, 38 insertions, 0 deletions

diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 8ea5fce92fa..62f863db871 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -7,13 +7,17 @@ import {
   GlTooltipDirective,
   GlLoadingIcon,
   GlIcon,
+  GlHoverLoadDirective,
 } from '@gitlab/ui';
 import { escapeRegExp } from 'lodash';
+import filesQuery from 'shared_queries/repository/files.query.graphql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { TREE_PAGE_SIZE } from '~/repository/constants';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getRefMixin from '../../mixins/get_ref';
+import blobInfoQuery from '../../queries/blob_info.query.graphql';
 import commitQuery from '../../queries/commit.query.graphql';
 
 export default {
@@ -28,6 +32,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlHoverLoad: GlHoverLoadDirective,
   },
   apollo: {
     commit: {
@@ -38,12 +43,17 @@ export default {
           type: this.type,
           path: this.currentPath,
           projectPath: this.projectPath,
+          maxOffset: this.totalEntries,
         };
       },
     },
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   props: {
+    totalEntries: {
+      type: Number,
+      required: true,
+    },
     id: {
       type: String,
       required: true,
@@ -139,6 +149,33 @@ export default {
       return this.commit && this.commit.lockLabel;
     },
   },
+  methods: {
+    handlePreload() {
+      return this.isFolder ? this.loadFolder() : this.loadBlob();
+    },
+    loadFolder() {
+      this.apolloQuery(filesQuery, {
+        projectPath: this.projectPath,
+        ref: this.ref,
+        path: this.path,
+        nextPageCursor: '',
+        pageSize: TREE_PAGE_SIZE,
+      });
+    },
+    loadBlob() {
+      if (!this.refactorBlobViewerEnabled) {
+        return;
+      }
+
+      this.apolloQuery(blobInfoQuery, {
+        projectPath: this.projectPath,
+        filePath: this.path,
+      });
+    },
+    apolloQuery(query, variables) {
+      this.$apollo.query({ query, variables });
+    },
+  },
 };
 </script>
 
@@ -148,6 +185,7 @@ export default {
       <component
         :is="linkComponent"
         ref="link"
+        v-gl-hover-load="handlePreload"
         :to="routerLinkTo"
         :href="url"
         :class="{