Lazy-load issue reviewers and assignees avatars (#13526)

The avatars inside the dropdowns were previously fetched every time a
Pull Request was opened resulting in potential unnecessary downloads.
This lazy-loads through the newish loading=lazy attribute.

Also did a few minor adjustments on the file.

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 4165ba49e6ae37279d818c9429bdb4738f8d8995..dd4dadca51179e6959051d3c6bac68e4a19c94bf 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -26,7 +26,8 @@
                                                        <a class="{{if not .CanChange}}ui poping up{{end}} item {{if .Checked}} checked {{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-content="{{$.i18n.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
                                                                <span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
                                                                <span class="text">
-                                                                       <img class="ui avatar image" src="{{.User.RelAvatarLink}}"> {{.User.GetDisplayName}}
+                                                                       <img class="ui avatar image mr-2" loading="lazy" src="{{.User.RelAvatarLink}}">
+                                                                       {{.User.GetDisplayName}}
                                                                </span>
                                                        </a>
                                                {{end}}
@@ -52,9 +53,12 @@
                        <span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_reviewers"}}</span>
                        <div class="selected">
                                {{range .PullReviewers}}
-                                       <div class="item" style="margin-bottom: 10px;">
+                                       <div class="item mb-2">
                                                {{if .User}}
-                                                       <a href="{{.User.HomeLink}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}">&nbsp;{{.User.GetDisplayName}}</a>
+                                                       <a href="{{.User.HomeLink}}">
+                                                               <img class="ui avatar image mr-2" src="{{.User.RelAvatarLink}}">
+                                                               {{.User.GetDisplayName}}
+                                                       </a>
                                                {{else if .Team}}
                                                        <span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
                                                {{end}}
@@ -253,11 +257,7 @@
                                {{range .Assignees}}
 
                                        {{$AssigneeID := .ID}}
-                                       <a class="item{{range $.Issue.Assignees}}
-                                               {{if eq .ID $AssigneeID}}
-                                                checked
-                                               {{end}}
-                                       {{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
+                                       <a class="item{{range $.Issue.Assignees}}{{if eq .ID $AssigneeID}} checked{{end}}{{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
                                                {{$checked := false}}
                                                {{range $.Issue.Assignees}}
                                                        {{if eq .ID $AssigneeID}}
@@ -266,7 +266,8 @@
                                                {{end}}
                                                <span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
                                                <span class="text">
-                                                       <img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
+                                                       <img class="ui avatar image mr-2" loading="lazy" src="{{.RelAvatarLink}}">
+                                                       {{.GetDisplayName}}
                                                </span>
                                        </a>
                                {{end}}
@@ -277,7 +278,10 @@
                        <div class="selected">
                                {{range .Issue.Assignees}}
                                        <div class="item" style="margin-bottom: 10px;">
-                                               <a href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}"><img class="ui avatar image" src="{{.RelAvatarLink}}">&nbsp;{{.GetDisplayName}}</a>
+                                               <a href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
+                                                       <img class="ui avatar image mr-2" src="{{.RelAvatarLink}}">
+                                                       {{.GetDisplayName}}
+                                               </a>
                                        </div>
                                {{end}}
                        </div>