mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-07 00:47:00 +02:00
Code Issues Releases Wiki Activity

perf: add loading="lazy" attribute for avatars (#3578)

Browse Source 
Co-authored-by: David Wheatley <david@davwheat.dev>
This commit is contained in:
Robert Korulczyk
2022-08-08 12:29:52 +02:00
committed by GitHub
parent bca7d48d99
commit e2f568252b
3 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
framework/core/js/src/common/helpers/avatar.tsx
View File

@@ -12,6 +12,7 @@ export interface AvatarAttrs extends ComponentAttrs {}
*/ */
export default function avatar(user: User | null, attrs: ComponentAttrs = {}): Mithril.Vnode { export default function avatar(user: User | null, attrs: ComponentAttrs = {}): Mithril.Vnode {
attrs.className = 'Avatar ' + (attrs.className || ''); attrs.className = 'Avatar ' + (attrs.className || '');
attrs.loading ??= 'lazy';
let content: string = ''; let content: string = '';
// If the `title` attribute is set to null or false, we don't want to give the // If the `title` attribute is set to null or false, we don't want to give the

2
framework/core/js/src/forum/components/AvatarEditor.js
View File

@@ -41,7 +41,7 @@ export default class AvatarEditor extends Component {
return ( return (
<div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}> <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
{avatar(user)} {avatar(user, { loading: 'eager' })}
<a <a
className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'} className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
title={app.translator.trans('core.forum.user.avatar_upload_tooltip')} title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}

2
framework/core/js/src/forum/components/UserCard.js
View File

@@ -54,7 +54,7 @@ export default class UserCard extends Component {
[AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)] [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)]
) : ( ) : (
<Link href={app.route.user(user)}> <Link href={app.route.user(user)}>
<div className="UserCard-avatar">{avatar(user)}</div> <div className="UserCard-avatar">{avatar(user, { loading: 'eager' })}</div>
{username(user)} {username(user)}
</Link> </Link>
)} )}