Fix various loading states, remove `.loading` class (#29920)

+1 -1

templates/admin/notice.tmpl

··· 50 50 </div> 51 51 </div> 52 52 <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> 54 54 </button> 55 55 </th> 56 56 </tr>

+1 -1

templates/repo/graph.tmpl

··· 50 50 </div> 51 51 </h2> 52 52 <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> 54 54 {{template "repo/graph/svgcontainer" .}} 55 55 {{template "repo/graph/commits" .}} 56 56 </div>

+3 -1

templates/repo/settings/webhook/history.tmpl

··· 6 6 <div class="ui right"> 7 7  8 8 <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> 10 12 </span> 11 13 </div> 12 14 {{end}}

-14

web_src/css/base.css

··· 720 720 background: var(--color-active); 721 721 } 722 722 723 - .ui.loading.segment::before, 724 - .ui.loading.form::before { 725 - background: none; 726 - } 727 - 728 - .ui.loading.form > *, 729 - .ui.loading.segment > * { 730 - opacity: 0.35; 731 - } 732 - 733 723 .ui.form .fields.error .field textarea, 734 724 .ui.form .fields.error .field select, 735 725 .ui.form .fields.error .field input:not([type]), ··· 819 809 820 810 .ui.form .field.muted { 821 811 opacity: var(--opacity-disabled); 822 - } 823 - 824 - .ui.loading.loading.input > i.icon svg { 825 - visibility: hidden; 826 812 } 827 813 828 814 .text.primary {

-6

web_src/css/features/gitgraph.css

··· 4 4 min-height: 350px; 5 5 } 6 6 7 - #git-graph-container > .ui.segment.loading { 8 - border: 0; 9 - z-index: 1; 10 - min-height: 246px; 11 - } 12 - 13 7 #git-graph-container h2 { 14 8 display: flex; 15 9 justify-content: space-between;

+1 -1

web_src/js/features/admin/common.js

··· 208 208 $('#delete-selection').on('click', async function (e) { 209 209 e.preventDefault(); 210 210 const $this = $(this); 211 - $this.addClass('loading disabled'); 211 + $this.addClass('is-loading disabled'); 212 212 const data = new FormData(); 213 213 $checkboxes.each(function () { 214 214 if ($(this).checkbox('is checked')) {

+1 -1

web_src/js/features/comp/WebHookEditor.js

··· 35 35 36 36 // Test delivery 37 37 document.getElementById('test-delivery')?.addEventListener('click', async function () { 38 - this.classList.add('loading', 'disabled'); 38 + this.classList.add('is-loading', 'disabled'); 39 39 await POST(this.getAttribute('data-link')); 40 40 setTimeout(() => { 41 41 window.location.href = this.getAttribute('data-redirect');

+6 -4

web_src/js/features/repo-common.js

··· 3 3 import {POST} from '../modules/fetch.js'; 4 4 5 5 async function getArchive($target, url, first) { 6 + const dropdownBtn = $target[0].closest('.ui.dropdown.button'); 7 + 6 8 try { 9 + dropdownBtn.classList.add('is-loading'); 7 10 const response = await POST(url); 8 11 if (response.status === 200) { 9 12 const data = await response.json(); 10 13 if (!data) { 11 14 // XXX Shouldn't happen? 12 - $target.closest('.dropdown').children('i').removeClass('loading'); 15 + dropdownBtn.classList.remove('is-loading'); 13 16 return; 14 17 } 15 18 16 19 if (!data.complete) { 17 - $target.closest('.dropdown').children('i').addClass('loading'); 18 20 // Wait for only three quarters of a second initially, in case it's 19 21 // quickly archived. 20 22 setTimeout(() => { ··· 22 24 }, first ? 750 : 2000); 23 25 } else { 24 26 // We don't need to continue checking. 25 - $target.closest('.dropdown').children('i').removeClass('loading'); 27 + dropdownBtn.classList.remove('is-loading'); 26 28 window.location.href = url; 27 29 } 28 30 } 29 31 } catch { 30 - $target.closest('.dropdown').children('i').removeClass('loading'); 32 + dropdownBtn.classList.remove('is-loading'); 31 33 } 32 34 } 33 35

+5 -5

web_src/js/features/repo-issue.js

··· 43 43 44 44 async function updateDeadline(deadlineString) { 45 45 hideElem($('#deadline-err-invalid-date')); 46 - $('#deadline-loader').addClass('loading'); 46 + $('#deadline-loader').addClass('is-loading'); 47 47 48 48 let realDeadline = null; 49 49 if (deadlineString !== '') { 50 50 const newDate = Date.parse(deadlineString); 51 51 52 52 if (Number.isNaN(newDate)) { 53 - $('#deadline-loader').removeClass('loading'); 53 + $('#deadline-loader').removeClass('is-loading'); 54 54 showElem($('#deadline-err-invalid-date')); 55 55 return false; 56 56 } ··· 69 69 } 70 70 } catch (error) { 71 71 console.error(error); 72 - $('#deadline-loader').removeClass('loading'); 72 + $('#deadline-loader').removeClass('is-loading'); 73 73 showElem($('#deadline-err-invalid-date')); 74 74 } 75 75 } ··· 237 237 e.preventDefault(); 238 238 const $this = $(this); 239 239 const redirect = $this.data('redirect'); 240 - $this.addClass('loading'); 240 + $this.addClass('is-loading'); 241 241 let response; 242 242 try { 243 243 response = await POST($this.data('do')); 244 244 } catch (error) { 245 245 console.error(error); 246 246 } finally { 247 - $this.removeClass('loading'); 247 + $this.removeClass('is-loading'); 248 248 } 249 249 let data; 250 250 try {

Configure Feed

Configure Feed