Improve rendering of very large files in the Repo File Browser

Issue: #222685 (closed)

What does this MR do?

Currently, repo "files" continue to load in chunk until it reaches to the end. This recursion implementation is problematic for very large files because resources are limited and at a certain point, the tab freezes and crashes.

In this iteration, we will implement a cap. If there are 1000 files, it will display a "show more" button. When the user clicks on the button, it will then trigger our original recursion implementation. In the next iteration, we will explore a better solution of possibly a pagination implementation.

MR	changes
👉 current	Add show more button
tbd > (issue #233074)	Add warning message when limit is reached
tbd > (issue #234276 (closed))	Improve subsequent files rendering after "show more" button is clicked
tbd > (issue > #234183 (closed))	Remove radius when show more button is displayed
tbd > (issue > #235439 (closed))	Prevent recursive fetch for all log trees again

Set up

There are 2 ways to test this feature locally.

A. Change the pageSize to set the limit

// app/assets/javascripts/repository/components/tree_content.vue
  data() {
      pageSize: 1000, // 👈 change this to ex. 10
    };
  },

B. Generate the files

Setup a new public project in your local environment. Clone it via HTTP. Run this script in your terminal that will generate the necessary number of files. Then run git push

for i in {0..1050}
do
    echo hello > "File$(printf "%03d" "$i").txt"
done

Testing Case

1. Go to Repository > Files

• If there are less than 1000 files, there's no "Show more" button

• If there are 1000 files, there will be a "Show more" button

• Click on the "Show more" button, it will load the rest of the files*

(*Note: there will still be performance issues if there a lot more files to load, this will be addressed in a follow-up MR)

• Once the "Show more" button is clicked, it will disappear. (Since it will trigger to load the rest of the files)

Screenshots

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Closes #222685 (closed)