diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-08 18:13:43 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-08 18:13:43 +0300 |
commit | 26b7ec2c6a7ffb01850dbecb0930b4f9412fe0f2 (patch) | |
tree | c9c8fdd391f97df8eea503a4ff21bb0b31ecb127 /app/assets/javascripts/repository | |
parent | 886ecba0bd2d964504b43303a39cfa2386f0feed (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/repository')
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; |