Skip to content

Commit d6fed9a

Browse files
authored
Fix various loading states, remove .loading class (#29920)
Various code was using fomantic `loading` class which I think got broken a while ago and rendered only a full circle. Fix those to use `is-loading`. Before: <img width="295" alt="Screenshot 2024-03-19 at 22 56 26" src="https://github.com/go-gitea/gitea/assets/115237/dbe83395-5db4-4868-90bc-3613866a35f0"> After: <img width="60" alt="Screenshot 2024-03-19 at 22 54 35" src="https://github.com/go-gitea/gitea/assets/115237/8ac19b7e-035a-4c6d-850b-53a234ef69c2"> <img width="294" alt="Screenshot 2024-03-19 at 22 54 56" src="https://github.com/go-gitea/gitea/assets/115237/34e819d7-25f7-43a1-9d48-4a68dcd2b6ad"> <img width="320" alt="Screenshot 2024-03-19 at 22 55 16" src="https://github.com/go-gitea/gitea/assets/115237/05127544-47ff-4e18-9fd8-c84e44c374f8"> <img width="153" alt="Screenshot 2024-03-19 at 23 01 43" src="https://github.com/go-gitea/gitea/assets/115237/a33248c6-b11d-40ff-82d8-f5a3d85b55aa"> <img width="1300" alt="Screenshot 2024-03-19 at 23 56 25" src="https://github.com/go-gitea/gitea/assets/115237/562ca876-b5d5-4295-961e-9d2cdab31ab0"> <img width="136" alt="Screenshot 2024-03-20 at 00 00 38" src="https://github.com/go-gitea/gitea/assets/115237/44838ac4-67f3-4fec-a8e3-978cc5dbdb72">
1 parent 4bef1fb commit d6fed9a

File tree

9 files changed

+18
-34
lines changed

9 files changed

+18
-34
lines changed

templates/admin/notice.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
</div>
5151
</div>
5252
<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
53-
{{ctx.Locale.Tr "admin.notices.delete_selected"}}
53+
<span class="text">{{ctx.Locale.Tr "admin.notices.delete_selected"}}</span>
5454
</button>
5555
</th>
5656
</tr>

templates/repo/graph.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
</div>
5151
</h2>
5252
<div class="ui dividing"></div>
53-
<div class="ui segment loading gt-hidden" id="loading-indicator"></div>
53+
<div class="is-loading tw-py-32 gt-hidden" id="loading-indicator"></div>
5454
{{template "repo/graph/svgcontainer" .}}
5555
{{template "repo/graph/commits" .}}
5656
</div>

templates/repo/settings/webhook/history.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
<div class="ui right">
77
<!-- the button is wrapped with a span because the tooltip doesn't show on hover if we put data-tooltip-content directly on the button -->
88
<span data-tooltip-content="{{if or $isNew .Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc_disabled"}}{{end}}">
9-
<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</button>
9+
<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">
10+
<span class="text">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</span>
11+
</button>
1012
</span>
1113
</div>
1214
{{end}}

web_src/css/base.css

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -710,16 +710,6 @@ img.ui.avatar,
710710
background: var(--color-active);
711711
}
712712

713-
.ui.loading.segment::before,
714-
.ui.loading.form::before {
715-
background: none;
716-
}
717-
718-
.ui.loading.form > *,
719-
.ui.loading.segment > * {
720-
opacity: 0.35;
721-
}
722-
723713
.ui.form .fields.error .field textarea,
724714
.ui.form .fields.error .field select,
725715
.ui.form .fields.error .field input:not([type]),
@@ -811,10 +801,6 @@ input:-webkit-autofill:active,
811801
opacity: var(--opacity-disabled);
812802
}
813803

814-
.ui.loading.loading.input > i.icon svg {
815-
visibility: hidden;
816-
}
817-
818804
.text.primary {
819805
color: var(--color-primary) !important;
820806
}

web_src/css/features/gitgraph.css

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,6 @@
44
min-height: 350px;
55
}
66

7-
#git-graph-container > .ui.segment.loading {
8-
border: 0;
9-
z-index: 1;
10-
min-height: 246px;
11-
}
12-
137
#git-graph-container h2 {
148
display: flex;
159
justify-content: space-between;

web_src/js/features/admin/common.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export function initAdminCommon() {
208208
$('#delete-selection').on('click', async function (e) {
209209
e.preventDefault();
210210
const $this = $(this);
211-
$this.addClass('loading disabled');
211+
$this.addClass('is-loading disabled');
212212
const data = new FormData();
213213
$checkboxes.each(function () {
214214
if ($(this).checkbox('is checked')) {

web_src/js/features/comp/WebHookEditor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function initCompWebHookEditor() {
3535

3636
// Test delivery
3737
document.getElementById('test-delivery')?.addEventListener('click', async function () {
38-
this.classList.add('loading', 'disabled');
38+
this.classList.add('is-loading', 'disabled');
3939
await POST(this.getAttribute('data-link'));
4040
setTimeout(() => {
4141
window.location.href = this.getAttribute('data-redirect');

web_src/js/features/repo-common.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,33 @@ import {hideElem, showElem} from '../utils/dom.js';
33
import {POST} from '../modules/fetch.js';
44

55
async function getArchive($target, url, first) {
6+
const dropdownBtn = $target[0].closest('.ui.dropdown.button');
7+
68
try {
9+
dropdownBtn.classList.add('is-loading');
710
const response = await POST(url);
811
if (response.status === 200) {
912
const data = await response.json();
1013
if (!data) {
1114
// XXX Shouldn't happen?
12-
$target.closest('.dropdown').children('i').removeClass('loading');
15+
dropdownBtn.classList.remove('is-loading');
1316
return;
1417
}
1518

1619
if (!data.complete) {
17-
$target.closest('.dropdown').children('i').addClass('loading');
1820
// Wait for only three quarters of a second initially, in case it's
1921
// quickly archived.
2022
setTimeout(() => {
2123
getArchive($target, url, false);
2224
}, first ? 750 : 2000);
2325
} else {
2426
// We don't need to continue checking.
25-
$target.closest('.dropdown').children('i').removeClass('loading');
27+
dropdownBtn.classList.remove('is-loading');
2628
window.location.href = url;
2729
}
2830
}
2931
} catch {
30-
$target.closest('.dropdown').children('i').removeClass('loading');
32+
dropdownBtn.classList.remove('is-loading');
3133
}
3234
}
3335

web_src/js/features/repo-issue.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ export function initRepoIssueTimeTracking() {
4343

4444
async function updateDeadline(deadlineString) {
4545
hideElem($('#deadline-err-invalid-date'));
46-
$('#deadline-loader').addClass('loading');
46+
$('#deadline-loader').addClass('is-loading');
4747

4848
let realDeadline = null;
4949
if (deadlineString !== '') {
5050
const newDate = Date.parse(deadlineString);
5151

5252
if (Number.isNaN(newDate)) {
53-
$('#deadline-loader').removeClass('loading');
53+
$('#deadline-loader').removeClass('is-loading');
5454
showElem($('#deadline-err-invalid-date'));
5555
return false;
5656
}
@@ -69,7 +69,7 @@ async function updateDeadline(deadlineString) {
6969
}
7070
} catch (error) {
7171
console.error(error);
72-
$('#deadline-loader').removeClass('loading');
72+
$('#deadline-loader').removeClass('is-loading');
7373
showElem($('#deadline-err-invalid-date'));
7474
}
7575
}
@@ -237,14 +237,14 @@ export function initRepoPullRequestUpdate() {
237237
e.preventDefault();
238238
const $this = $(this);
239239
const redirect = $this.data('redirect');
240-
$this.addClass('loading');
240+
$this.addClass('is-loading');
241241
let response;
242242
try {
243243
response = await POST($this.data('do'));
244244
} catch (error) {
245245
console.error(error);
246246
} finally {
247-
$this.removeClass('loading');
247+
$this.removeClass('is-loading');
248248
}
249249
let data;
250250
try {

0 commit comments

Comments
 (0)