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

Co-authored-by: David Wheatley <david@davwheat.dev>

framework/core/js/src/common/helpers/avatar.tsx

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

framework/core/js/src/forum/components/AvatarEditor.js

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

framework/core/js/src/forum/components/UserCard.js

@@ -54,7 +54,7 @@ export default class UserCard extends Component {
                   [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(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)}
                   </Link>
                 )}