diff --git a/routers/web/repo/issue_lock.go b/routers/web/repo/issue_lock.go
index 08b76e555..93f5a588d 100644
--- a/routers/web/repo/issue_lock.go
+++ b/routers/web/repo/issue_lock.go
@@ -20,14 +20,12 @@ func LockIssue(ctx *context.Context) {
 	}
 
 	if issue.IsLocked {
-		ctx.Flash.Error(ctx.Tr("repo.issues.lock_duplicate"))
-		ctx.Redirect(issue.Link())
+		ctx.JSONError(ctx.Tr("repo.issues.lock_duplicate"))
 		return
 	}
 
 	if !form.HasValidReason() {
-		ctx.Flash.Error(ctx.Tr("repo.issues.lock.unknown_reason"))
-		ctx.Redirect(issue.Link())
+		ctx.JSONError(ctx.Tr("repo.issues.lock.unknown_reason"))
 		return
 	}
 
@@ -40,7 +38,7 @@ func LockIssue(ctx *context.Context) {
 		return
 	}
 
-	ctx.Redirect(issue.Link())
+	ctx.JSONRedirect(issue.Link())
 }
 
 // UnlockIssue unlocks a previously locked issue.
@@ -51,8 +49,7 @@ func UnlockIssue(ctx *context.Context) {
 	}
 
 	if !issue.IsLocked {
-		ctx.Flash.Error(ctx.Tr("repo.issues.unlock_error"))
-		ctx.Redirect(issue.Link())
+		ctx.JSONError(ctx.Tr("repo.issues.unlock_error"))
 		return
 	}
 
@@ -64,5 +61,5 @@ func UnlockIssue(ctx *context.Context) {
 		return
 	}
 
-	ctx.Redirect(issue.Link())
+	ctx.JSONRedirect(issue.Link())
 }
diff --git a/routers/web/repo/issue_pin.go b/routers/web/repo/issue_pin.go
index 6586372fc..7c1a306e6 100644
--- a/routers/web/repo/issue_pin.go
+++ b/routers/web/repo/issue_pin.go
@@ -31,7 +31,7 @@ func IssuePinOrUnpin(ctx *context.Context) {
 		return
 	}
 
-	ctx.Redirect(issue.Link())
+	ctx.JSONRedirect(issue.Link())
 }
 
 // IssueUnpin unpins a Issue
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 0bc168448..0e36e15e5 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -556,7 +556,7 @@
 		<div class="ui divider"></div>
 
 		{{if or .PinEnabled .Issue.IsPinned}}
-			<form class="gt-mt-2" method="post" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
+			<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}}>
 				{{$.CsrfTokenHtml}}
 				<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
 					{{if not .Issue.IsPinned}}
@@ -599,7 +599,7 @@
 					{{end}}
 				</div>
 
-				<form class="ui form" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}"
+				<form class="ui form form-fetch-action" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}"
 					method="post">
 					{{.CsrfTokenHtml}}
 
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index cb7ac59b0..876758d8b 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -17,12 +17,10 @@
   content: "";
   position: absolute;
   display: block;
-  height: 4rem;
-  aspect-ratio: 1 / 1;
   left: 50%;
   top: 50%;
-  max-height: 100%;
-  max-width: 100%;
+  height: min(4em, 66.6%);
+  aspect-ratio: 1;
   transform: translate(-50%, -50%);
   animation: isloadingspin 500ms infinite linear;
   border-width: 4px;
@@ -35,6 +33,15 @@
   border-width: 2px;
 }
 
+/* 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. */
+form.single-button-form.is-loading > * {
+  opacity: 1;
+}
+
+form.single-button-form.is-loading .button {
+  color: transparent;
+}
+
 .markup pre.is-loading,
 .editor-loading.is-loading,
 .pdf-content.is-loading {