No bug: Set width/height on user avatars (#1432)

It prevents the surrounding UI from jumping while the image is loading. Relatedly, we're also making the alt= attribute empty to prevent (rather meaningless) text from appearing during loading.
mozilla · Oct 17, 2019 · 01fd682 · 01fd682
1 parent efc811f
commit 01fd682
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/frontend/src/core/user/components/UserMenu.js b/frontend/src/core/user/components/UserMenu.js
@@ -78,8 +78,14 @@ export class UserMenuBase extends React.Component<Props, State> {
                 onClick={ this.toggleVisibility }
             >
                 { user.isAuthenticated ?
-                <img src={ user.gravatarURLSmall } alt="User avatar" /> :
-                <div className="menu-icon fa fa-bars" />
+                    <img
+                        src={ user.gravatarURLSmall }
+                        alt=""
+                        height="44"
+                        width="44"
+                    />
+                    :
+                    <div className="menu-icon fa fa-bars" />
                 }
             </div>
 
@@ -89,7 +95,12 @@ export class UserMenuBase extends React.Component<Props, State> {
                 <React.Fragment>
                     <li className="details">
                         <a href={ `/contributors/${user.username}/` }>
-                            <img src={ user.gravatarURLBig } alt="User avatar" />
+                            <img
+                                src={ user.gravatarURLBig }
+                                alt=""
+                                height="88"
+                                width="88"
+                            />
                             <p className="name">{ user.nameOrEmail }</p>
                             <p className="email">{ user.email }</p>
                         </a>

diff --git a/frontend/src/modules/history/components/Translation.js b/frontend/src/modules/history/components/Translation.js
@@ -127,7 +127,12 @@ export class TranslationBase extends React.Component<InternalProps, State> {
         const { translation } = this.props;
 
         if (!translation.uid) {
-            return <img src='/static/img/anon.jpg' alt='User avatar' />;
+            return <img
+                src='/static/img/logo.svg'
+                alt=''
+                height='44'
+                width='44'
+            />;
         }
 
         return <a
@@ -137,7 +142,12 @@ export class TranslationBase extends React.Component<InternalProps, State> {
             rel='noopener noreferrer'
             onClick={ (e: SyntheticMouseEvent<>) => e.stopPropagation() }
         >
-            <img src={ translation.user_gravatar_url_small } alt='User avatar' />
+            <img
+                src={ translation.user_gravatar_url_small }
+                alt=''
+                height='44'
+                width='44'
+            />
         </a>
     }