[Glitch] Add server banner to web app

Port d2528b26b6da34f34b5d7a392e263428d3c09d69 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

1 files changed, 11 insertions, 6 deletions

diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index 9c7da744e..7cb0c9133 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import Skeleton from 'flavours/glitch/components/skeleton';
 
 export default class DisplayName extends React.PureComponent {
 
@@ -46,14 +47,15 @@ export default class DisplayName extends React.PureComponent {
 
     const computedClass = classNames('display-name', { inline }, className);
 
-    if (!account) return null;
-
     let displayName, suffix;
+    let acct;
 
-    let acct = account.get('acct');
+    if (account) {
+      acct = account.get('acct');
 
-    if (acct.indexOf('@') === -1 && localDomain) {
-      acct = `${acct}@${localDomain}`;
+      if (acct.indexOf('@') === -1 && localDomain) {
+        acct = `${acct}@${localDomain}`;
+      }
     }
 
     if (others && others.size > 0) {
@@ -80,9 +82,12 @@ export default class DisplayName extends React.PureComponent {
           <span className='display-name__account'>@{acct}</span>
         </a>
       );
-    } else {
+    } else if (account) {
       displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
       suffix      = <span className='display-name__account'>@{acct}</span>;
+    } else {
+      displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>;
+      suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>;
     }
 
     return (