diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/tree_content.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/tree_content.vue | 25 |
1 files changed, 20 insertions, 5 deletions
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index 794a8a85cc5..c861fb8dd06 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,8 +1,9 @@ <script> import filesQuery from 'shared_queries/repository/files.query.graphql'; 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 } from '../constants'; +import { TREE_PAGE_SIZE, TREE_INITIAL_FETCH_COUNT, TREE_PAGE_LIMIT } from '../constants'; import getRefMixin from '../mixins/get_ref'; import projectPathQuery from '../queries/project_path.query.graphql'; import { readmeFile } from '../utils/readme'; @@ -14,7 +15,7 @@ export default { FileTable, FilePreview, }, - mixins: [getRefMixin], + mixins: [getRefMixin, glFeatureFlagMixin()], apollo: { projectPath: { query: projectPathQuery, @@ -36,6 +37,7 @@ export default { return { projectPath: '', nextPageCursor: '', + pagesLoaded: 1, entries: { trees: [], submodules: [], @@ -44,16 +46,28 @@ export default { isLoadingFiles: false, isOverLimit: false, clickedShowMore: false, - pageSize: TREE_PAGE_SIZE, fetchCounter: 0, }; }, computed: { + pageSize() { + // we want to exponentially increase the page size to reduce the load on the frontend + const exponentialSize = (TREE_PAGE_SIZE / TREE_INITIAL_FETCH_COUNT) * (this.fetchCounter + 1); + return exponentialSize < TREE_PAGE_SIZE && this.glFeatures.increasePageSizeExponentially + ? exponentialSize + : TREE_PAGE_SIZE; + }, + totalEntries() { + return Object.values(this.entries).flat().length; + }, readme() { return readmeFile(this.entries.blobs); }, + pageLimitReached() { + return this.totalEntries / this.pagesLoaded >= TREE_PAGE_LIMIT; + }, hasShowMore() { - return !this.clickedShowMore && this.fetchCounter === TREE_INITIAL_FETCH_COUNT; + return !this.clickedShowMore && this.pageLimitReached; }, }, @@ -104,7 +118,7 @@ export default { if (pageInfo?.hasNextPage) { this.nextPageCursor = pageInfo.endCursor; this.fetchCounter += 1; - if (this.fetchCounter < TREE_INITIAL_FETCH_COUNT || this.clickedShowMore) { + if (!this.pageLimitReached || this.clickedShowMore) { this.fetchFiles(); this.clickedShowMore = false; } @@ -127,6 +141,7 @@ export default { }, handleShowMore() { this.clickedShowMore = true; + this.pagesLoaded += 1; this.fetchFiles(); }, }, |