1 files changed, 22 insertions, 1 deletions
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 0fb7ee22d7..9b5da7de82 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -119,26 +119,47 @@ 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-button', (e) => {
+  $(document).on('click', 'a#diff-show-more-files', (e) => {
+    e.preventDefault();
+
+    const $target = $(e.target);
+    loadMoreFiles($target.data('href'), () => {});
+  });
+
+  $(document).on('click', 'a.diff-load-button', (e) => {
     e.preventDefault();
     const $target = $(e.target);