Restore function to "Show more" buttons

web_src/js/components/DiffFileTree.vue

@@ -8,7 +8,7 @@
       <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
     </div>
     <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span>{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
+      <span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
     </div>
   </div>
 </template>
@@ -29,6 +29,7 @@ export default {
   },
   computed: {
     fileTree() {
+      pageData.diffFileInfo.files = this.files;
       const result = [];
       for (const file of this.files) {
         // Split file into directories

web_src/js/features/repo-diff.js

@@ -119,25 +119,46 @@ function onShowMoreFiles() {
 
 export function doLoadMoreFiles(link, diffEnd, callback) {
   const url = `${link}?skip-to=${diffEnd}&file-only=true`;
+  loadMoreFiles(url, callback);
+}
+
+function loadMoreFiles(url, callback) {
+  const $target = $('a#diff-show-more-files');
+  if ($target.hasClass('disabled')) {
+    callback();
+    return;
+  }
+  $target.addClass('disabled');
   $.ajax({
     type: 'GET',
     url,
   }).done((resp) => {
     if (!resp) {
+      $target.removeClass('disabled');
       callback(resp);
       return;
     }
+    $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children());
     // By simply rerunning the script we add the new data to our existing
     // pagedata object. this triggers vue and the filetree and filelist will
     // render the new elements.
     $('body').append($(resp).find('script#diff-data-script'));
+    onShowMoreFiles();
     callback(resp);
   }).fail(() => {
+    $target.removeClass('disabled');
     callback();
   });
 }
 
 export function initRepoDiffShowMore() {
+  $(document).on('click', 'a#diff-show-more-files', (e) => {
+    e.preventDefault();
+
+    const $target = $(e.target);
+    loadMoreFiles($target.data('href'), () => {});
+  });
+
   $(document).on('click', 'a.diff-show-more-button', (e) => {
     e.preventDefault();
     const $target = $(e.target);

web_src/less/_repository.less

@@ -1667,6 +1667,9 @@
         background-color: var(--color-teal);
       }
     }
+    .button {
+      padding: 8px 12px;
+    }
   }
 
   .diff-box .header:not(.resolved-placeholder) {