Add latest changes from gitlab-org/gitlab@master

4 files changed, 33 insertions, 17 deletions

diff --git a/app/assets/javascripts/repository/commits_service.js b/app/assets/javascripts/repository/commits_service.js
index 504efaea8cc..5fd9cfd4e53 100644
--- a/app/assets/javascripts/repository/commits_service.js
+++ b/app/assets/javascripts/repository/commits_service.js
@@ -52,14 +52,9 @@ export const loadCommits = async (projectPath, path, ref, offset) => {
   }
 
   // We fetch in batches of 25, so this ensures we don't refetch
-  Array.from(Array(COMMIT_BATCH_SIZE)).forEach((_, i) => {
-    addRequestedOffset(offset - i);
-    addRequestedOffset(offset + i);
-  });
+  Array.from(Array(COMMIT_BATCH_SIZE)).forEach((_, i) => addRequestedOffset(offset + i));
 
-  // Since a user could scroll either up or down, we want to support lazy loading in both directions
-  const commitsBatchUp = await fetchData(projectPath, path, ref, offset - COMMIT_BATCH_SIZE);
-  const commitsBatchDown = await fetchData(projectPath, path, ref, offset);
+  const commits = await fetchData(projectPath, path, ref, offset);
 
-  return commitsBatchUp.concat(commitsBatchDown);
+  return commits;
 };
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index bd06c064ab7..8fcec5fb893 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -13,7 +13,7 @@ import {
 import { escapeRegExp } from 'lodash';
 import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
-import { TREE_PAGE_SIZE } from '~/repository/constants';
+import { TREE_PAGE_SIZE, ROW_APPEAR_DELAY } 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';
@@ -128,6 +128,7 @@ export default {
     return {
       commit: null,
       hasRowAppeared: false,
+      delayedRowAppear: null,
     };
   },
   computed: {
@@ -202,14 +203,19 @@ export default {
     rowAppeared() {
       this.hasRowAppeared = true;
 
+      if (this.commitInfo) {
+        return;
+      }
+
       if (this.glFeatures.lazyLoadCommits) {
-        this.$emit('row-appear', {
-          rowNumber: this.rowNumber,
-          hasCommit: Boolean(this.commitInfo),
-        });
+        this.delayedRowAppear = setTimeout(
+          () => this.$emit('row-appear', this.rowNumber),
+          ROW_APPEAR_DELAY,
+        );
       }
     },
     rowDisappeared() {
+      clearTimeout(this.delayedRowAppear);
       this.hasRowAppeared = false;
     },
   },
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index ffe8d5531f8..130ebf77361 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -3,7 +3,12 @@ import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.g
 import createFlash from '~/flash';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __ } from '../../locale';
-import { TREE_PAGE_SIZE, TREE_INITIAL_FETCH_COUNT, TREE_PAGE_LIMIT } from '../constants';
+import {
+  TREE_PAGE_SIZE,
+  TREE_INITIAL_FETCH_COUNT,
+  TREE_PAGE_LIMIT,
+  COMMIT_BATCH_SIZE,
+} from '../constants';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 import { readmeFile } from '../utils/readme';
@@ -151,11 +156,19 @@ export default {
         .concat(data.trees.pageInfo, data.submodules.pageInfo, data.blobs.pageInfo)
         .find(({ hasNextPage }) => hasNextPage);
     },
-    loadCommitData({ rowNumber = 0, hasCommit } = {}) {
-      if (!this.glFeatures.lazyLoadCommits || hasCommit || isRequested(rowNumber)) {
+    handleRowAppear(rowNumber) {
+      if (!this.glFeatures.lazyLoadCommits || isRequested(rowNumber)) {
         return;
       }
 
+      // Since a user could scroll either up or down, we want to support lazy loading in both directions
+      this.loadCommitData(rowNumber);
+
+      if (rowNumber - COMMIT_BATCH_SIZE >= 0) {
+        this.loadCommitData(rowNumber - COMMIT_BATCH_SIZE);
+      }
+    },
+    loadCommitData(rowNumber) {
       loadCommits(this.projectPath, this.path, this.ref, rowNumber)
         .then(this.setCommitData)
         .catch(() => {});
@@ -182,7 +195,7 @@ export default {
       :has-more="hasShowMore"
       :commits="commits"
       @showMore="handleShowMore"
-      @row-appear="loadCommitData"
+      @row-appear="handleRowAppear"
     />
     <file-preview v-if="readme" :blob="readme" />
   </div>
diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js
index cdc4818e493..d01757d6141 100644
--- a/app/assets/javascripts/repository/constants.js
+++ b/app/assets/javascripts/repository/constants.js
@@ -23,3 +23,5 @@ export const I18N_COMMIT_DATA_FETCH_ERROR = __('An error occurred while fetching
 
 export const PDF_MAX_FILE_SIZE = 10000000; // 10 MB
 export const PDF_MAX_PAGE_LIMIT = 50;
+
+export const ROW_APPEAR_DELAY = 150;