loading up the forgejo repo on tangled to test page performance
Remove jQuery AJAX from the diff functions (#29743)
- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the review conversation comment, resolve, unresolve, show more
files, and load diff functionality and it works as before
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 70e077036f8d3026cecddb746a1de69e02ab9b9a)
Conflicts:
web_src/js/features/repo-diff.js
authored by
Yarden Shoham
silverwind
and committed by
Earl Warren
edf28c74
9df7f563
+38
-26
+38
-26
web_src/js/features/repo-diff.js
+38
-26
web_src/js/features/repo-diff.js
···
8
8
import {initImageDiff} from './imagediff.js';
9
9
import {showErrorToast} from '../modules/toast.js';
10
10
import {submitEventSubmitter} from '../utils/dom.js';
11
+
import {POST, GET} from '../modules/fetch.js';
11
12
12
-
const {csrfToken, pageData, i18n} = window.config;
13
+
const {pageData, i18n} = window.config;
13
14
14
15
function initRepoDiffReviewButton() {
15
16
const $reviewBox = $('#review-box');
···
65
66
if (isSubmittedByButton && submitter.name) {
66
67
formData.append(submitter.name, submitter.value);
67
68
}
68
-
const formDataString = String(new URLSearchParams(formData));
69
-
const $newConversationHolder = $(await $.post($form.attr('action'), formDataString));
69
+
70
+
const response = await POST($form.attr('action'), {data: formData});
71
+
const $newConversationHolder = $(await response.text());
70
72
const {path, side, idx} = $newConversationHolder.data();
71
73
72
74
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
···
92
94
const action = $(this).data('action');
93
95
const url = $(this).data('update-url');
94
96
95
-
const data = await $.post(url, {_csrf: csrfToken, origin, action, comment_id});
97
+
try {
98
+
const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
99
+
const data = await response.text();
96
100
97
-
if ($(this).closest('.conversation-holder').length) {
98
-
const conversation = $(data);
99
-
$(this).closest('.conversation-holder').replaceWith(conversation);
100
-
conversation.find('.dropdown').dropdown();
101
-
initCompReactionSelector(conversation);
102
-
} else {
103
-
window.location.reload();
101
+
if ($(this).closest('.conversation-holder').length) {
102
+
const conversation = $(data);
103
+
$(this).closest('.conversation-holder').replaceWith(conversation);
104
+
conversation.find('.dropdown').dropdown();
105
+
initCompReactionSelector(conversation);
106
+
} else {
107
+
window.location.reload();
108
+
}
109
+
} catch (error) {
110
+
console.error('Error:', error);
104
111
}
105
112
});
106
113
}
···
135
142
initImageDiff();
136
143
}
137
144
138
-
export function loadMoreFiles(url) {
145
+
export async function loadMoreFiles(url) {
139
146
const $target = $('a#diff-show-more-files');
140
147
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
141
148
return;
···
143
150
144
151
pageData.diffFileInfo.isLoadingNewData = true;
145
152
$target.addClass('disabled');
146
-
$.ajax({
147
-
type: 'GET',
148
-
url,
149
-
}).done((resp) => {
153
+
154
+
try {
155
+
const response = await GET(url);
156
+
const resp = await response.text();
150
157
const $resp = $(resp);
151
158
// the response is a full HTML page, we need to extract the relevant contents:
152
159
// 1. append the newly loaded file list items to the existing list
···
155
162
$('body').append($resp.find('script#diff-data-script'));
156
163
157
164
onShowMoreFiles();
158
-
}).always(() => {
165
+
} catch (error) {
166
+
console.error('Error:', error);
167
+
showErrorToast('An error occurred while loading more files.');
168
+
} finally {
159
169
$target.removeClass('disabled');
160
170
pageData.diffFileInfo.isLoadingNewData = false;
161
-
});
171
+
}
162
172
}
163
173
164
174
function initRepoDiffShowMore() {
···
170
180
loadMoreFiles(linkLoadMore);
171
181
});
172
182
173
-
$(document).on('click', 'a.diff-load-button', (e) => {
183
+
$(document).on('click', 'a.diff-load-button', async (e) => {
174
184
e.preventDefault();
175
185
const $target = $(e.target);
176
186
···
181
191
$target.addClass('disabled');
182
192
183
193
const url = $target.data('href');
184
-
$.ajax({
185
-
type: 'GET',
186
-
url,
187
-
}).done((resp) => {
194
+
195
+
try {
196
+
const response = await GET(url);
197
+
const resp = await response.text();
198
+
188
199
if (!resp) {
189
-
$target.removeClass('disabled');
190
200
return;
191
201
}
192
202
$target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
193
203
onShowMoreFiles();
194
-
}).fail(() => {
204
+
} catch (error) {
205
+
console.error('Error:', error);
206
+
} finally {
195
207
$target.removeClass('disabled');
196
-
});
208
+
}
197
209
});
198
210
}
199
211