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.
This commit is contained in:
silverwind 2020-11-12 06:55:34 +01:00 committed by GitHub
parent 6838bacc4c
commit 4117a443c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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}}> <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="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <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> </span>
</a> </a>
{{end}} {{end}}
@ -52,9 +53,12 @@
<span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_reviewers"}}</span> <span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_reviewers"}}</span>
<div class="selected"> <div class="selected">
{{range .PullReviewers}} {{range .PullReviewers}}
<div class="item" style="margin-bottom: 10px;"> <div class="item mb-2">
{{if .User}} {{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}} {{else if .Team}}
<span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span> <span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
{{end}} {{end}}
@ -253,11 +257,7 @@
{{range .Assignees}} {{range .Assignees}}
{{$AssigneeID := .ID}} {{$AssigneeID := .ID}}
<a class="item{{range $.Issue.Assignees}} <a class="item{{range $.Issue.Assignees}}{{if eq .ID $AssigneeID}} checked{{end}}{{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
{{if eq .ID $AssigneeID}}
checked
{{end}}
{{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
{{$checked := false}} {{$checked := false}}
{{range $.Issue.Assignees}} {{range $.Issue.Assignees}}
{{if eq .ID $AssigneeID}} {{if eq .ID $AssigneeID}}
@ -266,7 +266,8 @@
{{end}} {{end}}
<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span> <span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}} <img class="ui avatar image mr-2" loading="lazy" src="{{.RelAvatarLink}}">
{{.GetDisplayName}}
</span> </span>
</a> </a>
{{end}} {{end}}
@ -277,7 +278,10 @@
<div class="selected"> <div class="selected">
{{range .Issue.Assignees}} {{range .Issue.Assignees}}
<div class="item" style="margin-bottom: 10px;"> <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> </div>
{{end}} {{end}}
</div> </div>