loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use fetch form action for lock/unlock/pin/unpin on sidebar (#25380)

Before:

<img width="364" alt="Screen Shot 2023-06-20 at 11 59 11"
src="https://github.com/go-gitea/gitea/assets/17645053/ad284b7e-8d21-43be-b178-bbcfd37cb5bd">

Might trigger many posts when keep clicking the buttons above.

<img width="448" alt="Screen Shot 2023-06-20 at 11 52 28"
src="https://github.com/go-gitea/gitea/assets/17645053/a60aa6ac-af74-45e4-b13a-512b436b81b0">
<img width="678" alt="Screen Shot 2023-06-20 at 11 52 37"
src="https://github.com/go-gitea/gitea/assets/17645053/d6662700-3643-4cc7-a2ec-64e1c0f5fbdb">

After (PR sidebar, Same for issue):


https://github.com/go-gitea/gitea/assets/17645053/9df3ad1f-e29c-439b-8bde-e6b917d63cc6

For delete, it is using `base/modal_actions_confirm` subtemplate, and we
might need another general solution for this (maybe add another
attribute to the subtemplate or something)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

authored by

HesterG
silverwind
Giteabot
wxiaoguang
and committed by
GitHub
c6f1fb1c f0b773e0

+19 -15
+5 -8
routers/web/repo/issue_lock.go
··· 20 20 } 21 21 22 22 if issue.IsLocked { 23 - ctx.Flash.Error(ctx.Tr("repo.issues.lock_duplicate")) 24 - ctx.Redirect(issue.Link()) 23 + ctx.JSONError(ctx.Tr("repo.issues.lock_duplicate")) 25 24 return 26 25 } 27 26 28 27 if !form.HasValidReason() { 29 - ctx.Flash.Error(ctx.Tr("repo.issues.lock.unknown_reason")) 30 - ctx.Redirect(issue.Link()) 28 + ctx.JSONError(ctx.Tr("repo.issues.lock.unknown_reason")) 31 29 return 32 30 } 33 31 ··· 40 38 return 41 39 } 42 40 43 - ctx.Redirect(issue.Link()) 41 + ctx.JSONRedirect(issue.Link()) 44 42 } 45 43 46 44 // UnlockIssue unlocks a previously locked issue. ··· 51 49 } 52 50 53 51 if !issue.IsLocked { 54 - ctx.Flash.Error(ctx.Tr("repo.issues.unlock_error")) 55 - ctx.Redirect(issue.Link()) 52 + ctx.JSONError(ctx.Tr("repo.issues.unlock_error")) 56 53 return 57 54 } 58 55 ··· 64 61 return 65 62 } 66 63 67 - ctx.Redirect(issue.Link()) 64 + ctx.JSONRedirect(issue.Link()) 68 65 }
+1 -1
routers/web/repo/issue_pin.go
··· 31 31 return 32 32 } 33 33 34 - ctx.Redirect(issue.Link()) 34 + ctx.JSONRedirect(issue.Link()) 35 35 } 36 36 37 37 // IssueUnpin unpins a Issue
+2 -2
templates/repo/issue/view_content/sidebar.tmpl
··· 556 556 <div class="ui divider"></div> 557 557 558 558 {{if or .PinEnabled .Issue.IsPinned}} 559 - <form class="gt-mt-2" method="post" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}> 559 + <form class="gt-mt-2 form-fetch-action single-button-form" method="post" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}> 560 560 {{$.CsrfTokenHtml}} 561 561 <button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}"> 562 562 {{if not .Issue.IsPinned}} ··· 599 599 {{end}} 600 600 </div> 601 601 602 - <form class="ui form" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}" 602 + <form class="ui form form-fetch-action" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}" 603 603 method="post"> 604 604 {{.CsrfTokenHtml}} 605 605
+11 -4
web_src/css/modules/animations.css
··· 17 17 content: ""; 18 18 position: absolute; 19 19 display: block; 20 - height: 4rem; 21 - aspect-ratio: 1 / 1; 22 20 left: 50%; 23 21 top: 50%; 24 - max-height: 100%; 25 - max-width: 100%; 22 + height: min(4em, 66.6%); 23 + aspect-ratio: 1; 26 24 transform: translate(-50%, -50%); 27 25 animation: isloadingspin 500ms infinite linear; 28 26 border-width: 4px; ··· 33 31 34 32 .is-loading.small-loading-icon::after { 35 33 border-width: 2px; 34 + } 35 + 36 + /* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */ 37 + form.single-button-form.is-loading > * { 38 + opacity: 1; 39 + } 40 + 41 + form.single-button-form.is-loading .button { 42 + color: transparent; 36 43 } 37 44 38 45 .markup pre.is-loading,