Refactor diffFileInfo / DiffTreeStore (#24998)

Follow  #21012, #22399

Replace #24983, fix #24938

Help #24956

Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".

Screenshot: these two buttons both work. After complete loading, the UI
is also right.

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/cc6310fd-7f27-45ea-ab4f-24952a87b421)


![image](https://github.com/go-gitea/gitea/assets/2114189/4c11dd67-ac03-4568-8541-91204d27a4e3)


![image](https://github.com/go-gitea/gitea/assets/2114189/38a22cec-41be-41e6-a209-f347b7a4c1de)

</details>

1 files changed, 16 insertions, 23 deletions

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index d0622254bf..1d3c24e342 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -5,7 +5,7 @@ import {initDiffFileTree} from './repo-diff-filetree.js';
 import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
 
-const {csrfToken} = window.config;
+const {csrfToken, pageData} = window.config;
 
 function initRepoDiffReviewButton() {
   const $reviewBox = $('#review-box');
@@ -119,37 +119,29 @@ function onShowMoreFiles() {
   countAndUpdateViewedFiles();
 }
 
-export function doLoadMoreFiles(link, diffEnd, callback) {
-  const url = `${link}?skip-to=${diffEnd}&file-only=true`;
-  loadMoreFiles(url, callback);
-}
-
-function loadMoreFiles(url, callback) {
+export function loadMoreFiles(url) {
   const $target = $('a#diff-show-more-files');
-  if ($target.hasClass('disabled')) {
-    callback();
+  if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
     return;
   }
+
+  pageData.diffFileInfo.isLoadingNewData = true;
   $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'));
+    const $resp = $(resp);
+    // the response is a full HTML page, we need to extract the relevant contents:
+    // 1. append the newly loaded file list items to the existing list
+    $('#diff-incomplete').replaceWith($resp.find('#diff-file-boxes').children());
+    // 2. re-execute the script to append the newly loaded items to the JS variables to refresh the DiffFileTree
+    $('body').append($resp.find('script#diff-data-script'));
+
     onShowMoreFiles();
-    callback(resp);
-  }).fail(() => {
+  }).always(() => {
     $target.removeClass('disabled');
-    callback();
+    pageData.diffFileInfo.isLoadingNewData = false;
   });
 }
 
@@ -158,7 +150,8 @@ function initRepoDiffShowMore() {
     e.preventDefault();
 
     const $target = $(e.target);
-    loadMoreFiles($target.data('href'), () => {});
+    const linkLoadMore = $target.attr('data-href');
+    loadMoreFiles(linkLoadMore);
   });
 
   $(document).on('click', 'a.diff-load-button', (e) => {