Updated Placeholder Responsiveness and Added new Placeholders

• Updated:
- Placeholder Responsiveness

• Added:
- new Placeholders

app/javascript/gabsocial/components/list.js

@@ -47,7 +47,7 @@ export default class List extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
           showLoading={showLoading}
           placeholderComponent={ListItemPlaceholder}
-          placeholderCount={6}
+          placeholderCount={12}
         >
           {
             items.map((item, i) => (

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -38,7 +38,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
     const Wrapper = noPanel ? Dummy : PanelLayout
 
-    if (!account) {
+    if (!account && !noPanel) {
       return (
         <Wrapper title={intl.formatMessage(messages.title)}>
           <ProfileInfoPanelPlaceholder />

app/javascript/gabsocial/components/panel/profile_stats_panel.js

@@ -38,7 +38,7 @@ class ProfileStatsPanel extends ImmutablePureComponent {
     return (
       <Wrapper>
         {
-          !account &&
+          !account && !noPanel &&
           <ProfileStatsPanelPlaceholder />
         }
         {

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -97,6 +97,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
                 showDismiss
                 key={accountId}
                 id={accountId}
+                isSmall={isLoading ? true : undefined}
                 dismissAction={dismissRelatedSuggestion}
               />
             ))

app/javascript/gabsocial/components/placeholder/account_placeholder.js

@@ -6,10 +6,11 @@ export default class AccountPlaceholder extends PureComponent {
   
   static propTypes = {
     isLast: PropTypes.bool,
+    isSmall: PropTypes.bool,
   }
 
   render() {
-    const { isLast } = this.props
+    const { isLast, isSmall } = this.props
 
     const classes = CX({
       default: 1,
@@ -21,6 +22,7 @@ export default class AccountPlaceholder extends PureComponent {
 
     const width = getRandomInt(120, 300)
 
+    if (isSmall) {
       return (
         <div className={classes}>
           <PlaceholderLayout viewBox='0 0 400 60'>
@@ -32,4 +34,15 @@ export default class AccountPlaceholder extends PureComponent {
       )
     }
 
+    return (
+      <div className={classes}>
+        <PlaceholderLayout viewBox='0 0 400 32'>
+          <rect x="38" y="4" rx="3" ry="3" width="268" height="6" /> 
+          <circle cx="14" cy="14" r="14" /> 
+          <rect x="36" y="18" rx="3" ry="3" width="208" height="6" />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
 }

app/javascript/gabsocial/components/placeholder/list_item_placeholder.js

@@ -1,6 +1,7 @@
 import { CX } from '../../constants'
 import { getRandomInt } from '../../utils/numbers'
 import PlaceholderLayout from './placeholder_layout'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
 export default class ListItemPlaceholder extends PureComponent {
   
@@ -19,15 +20,26 @@ export default class ListItemPlaceholder extends PureComponent {
       borderBottom1PX: !isLast,
     })
 
+    const classesXS = CX({
+      default: 1,
+      px15: 1,
+      py7: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
     const width = getRandomInt(120, 375)
 
     return (
-      <div className={classes}>
+      <ResponsiveClassesComponent
+        classNames={classes}
+        classNamesXS={classesXS}
+      >
         <PlaceholderLayout viewBox='0 0 400 30'>
           <circle cx='10' cy='17' r='10' /> 
           <rect x='30' y='12' rx='5' ry='5' width={width} height='12' />
         </PlaceholderLayout>
-      </div>
+      </ResponsiveClassesComponent>
     )
   }
 

app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js

@@ -2,10 +2,6 @@ import PlaceholderLayout from './placeholder_layout'
 
 export default class MediaGalleryPanelPlaceholder extends PureComponent {
   
-  static propTypes = {
-    loaderProps: PropTypes.object,
-  }
-
   render() {
     return (
       <div className={_s.default}>

app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js

@@ -0,0 +1,28 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class MediaGalleryPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    type: PropTypes.string,
+  }
+
+  render() {
+    const { type } = this.props
+
+    return (
+      <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
+        <PlaceholderLayout viewBox='0 0 400 196'>
+          <rect x='0' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='100' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='300' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='200' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='-2' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='100' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='300' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='200' y='100' rx='0' ry='0' width='96' height='96' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/notification_placeholder.js

@@ -1,5 +1,10 @@
-import { CX } from '../../constants'
+import { Fragment } from 'react'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../../constants'
 import { getRandomInt } from '../../utils/numbers'
+import ResponsiveComponent from '../../features/ui/util/responsive_component'
 import PlaceholderLayout from './placeholder_layout'
 
 export default class NotificationPlaceholder extends PureComponent {
@@ -19,11 +24,21 @@ export default class NotificationPlaceholder extends PureComponent {
       borderBottom1PX: !isLast,
     })
 
+    const classesXS = CX({
+      default: 1,
+      px15: 1,
+      py15: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
     const width1 = getRandomInt(100, 340)
     const width2 = getRandomInt(120, 320)
     const left = width2 + 30
 
     return (
+      <Fragment>
+        <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
           <div className={classes}>
             <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 400 170'>
@@ -46,6 +61,27 @@ export default class NotificationPlaceholder extends PureComponent {
               </PlaceholderLayout>
             </div>
           </div>
+        </ResponsiveComponent>
+        <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
+          <div className={classesXS}>
+            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+              <PlaceholderLayout viewBox='0 0 380 200'>
+                <circle cx='20' cy='20' r='20' /> 
+                <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' /> 
+                <rect x='0' y='76' rx='0' ry='0' width='1' height='120' /> 
+                <rect x='379' y='76' rx='0' ry='0' width='1' height='120' /> 
+                <rect x='0' y='76' rx='0' ry='0' width='380' height='1' /> 
+                <rect x='0' y='195' rx='0' ry='0' width='380' height='1' /> 
+                <rect x='12' y='90' rx='5' ry='5' width='280' height='10' /> 
+                <rect x='12' y='108' rx='5' ry='5' width='80' height='10' /> 
+                <rect x='12' y='136' rx='5' ry='5' width='320' height='10' /> 
+                <rect x='12' y='154' rx='5' ry='5' width='210' height='10' /> 
+                <rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
+              </PlaceholderLayout>
+            </div>
+          </div>
+        </ResponsiveComponent>
+      </Fragment>
     )
   }
 

app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js

@@ -0,0 +1,32 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class ProfileHeaderXSPlaceholder extends PureComponent {
+  
+  render() {
+    return (
+      <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+        <PlaceholderLayout viewBox='0 0 400 660'>
+          <rect x='0' y='0' rx='0' ry='0' width='400' height='202' /> 
+          <circle cx='200' cy='200' r='54' /> 
+          <rect x='78' y='272' rx='9' ry='9' width='240' height='18' /> 
+          <rect x='110' y='301' rx='7' ry='7' width='180' height='14' />
+          <rect x='125' y='334' rx='23' ry='23' width='150' height='46' />
+          <rect x='0' y='402' rx='6' ry='6' width='380' height='12' /> 
+          <rect x='0' y='426' rx='6' ry='6' width='340' height='12' /> 
+          <rect x='0' y='450' rx='6' ry='6' width='200' height='12' />
+          <rect x='0' y='476' rx='0' ry='0' width='400' height='1' /> 
+          <rect x='0' y='492' rx='6' ry='6' width='240' height='12' />
+          <rect x='0' y='520' rx='0' ry='0' width='400' height='1' /> 
+          <circle cx='80' cy='574' r='30' /> 
+          <circle cx='200' cy='576' r='32' /> 
+          <circle cx='320' cy='576' r='32' /> 
+          <rect x='10' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='110' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='310' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='210' y='630' rx='11' ry='11' width='80' height='22' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js

@@ -2,10 +2,6 @@ import PlaceholderLayout from './placeholder_layout'
 
 export default class ProfileStatsPanelPlaceholder extends PureComponent {
 
-  static propTypes = {
-    loaderProps: PropTypes.object,
-  }
-
   render() {
     return (
       <div className={_s.default}>

app/javascript/gabsocial/components/placeholder/status_placeholder.js

@@ -1,5 +1,10 @@
-import { CX } from '../../constants'
+import { Fragment } from 'react'
-import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import ResponsiveComponent from '../../features/ui/util/responsive_component'
 import PlaceholderLayout from './placeholder_layout'
 
 export default class StatusPlaceholder extends PureComponent {
@@ -27,20 +32,38 @@ export default class StatusPlaceholder extends PureComponent {
       borderColorSecondary: 1,
     })
 
+    const width = getRandomInt(120, 375)
+    const width1 = getRandomInt(360, 450)
+    const width2 = getRandomInt(260, 360)
+    const width3 = getRandomInt(120, 260)
+
     return (
-      <ResponsiveClassesComponent
+      <Fragment>
-        classNames={containerClasses}
+        <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
-        classNamesXS={containerClassesXS}
+          <div className={containerClasses}>
-      >
             <PlaceholderLayout viewBox='0 0 476 136'>
-          <rect x='48' y='8' width='88' height='6' rx='3' />
+              <rect x='48' y='8' width={width} height='6' rx='3' />
               <rect x='48' y='26' width='52' height='6' rx='3' />
-          <rect x='0' y='56' width='410' height='6' rx='3' />
+              <rect x='0' y='56' width={width1} height='6' rx='3' />
-          <rect x='0' y='72' width='380' height='6' rx='3' />
+              <rect x='0' y='72' width={width2} height='6' rx='3' />
-          <rect x='0' y='88' width='178' height='6' rx='3' />
+              <rect x='0' y='88' width={width3} height='6' rx='3' />
               <circle cx='20' cy='20' r='20' />
             </PlaceholderLayout>
-      </ResponsiveClassesComponent>
+          </div>
+        </ResponsiveComponent>
+        <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
+          <div className={containerClassesXS}>
+            <PlaceholderLayout viewBox='0 0 380 140'>
+              <circle cx='25' cy='27' r='25' /> 
+              <rect x='64' y='12' rx='5' ry='5' width='235' height='10' /> 
+              <rect x='64' y='36' rx='5' ry='5' width='125' height='10' /> 
+              <rect x='0' y='72' rx='5' ry='5' width='370' height='10' /> 
+              <rect x='0' y='96' rx='5' ry='5' width='318' height='10' /> 
+              <rect x='0' y='122' rx='5' ry='5' width='264' height='10' />
+            </PlaceholderLayout>
+          </div>
+        </ResponsiveComponent>
+      </Fragment>
     )
 
   }

app/javascript/gabsocial/components/profile_header.js

@@ -21,6 +21,7 @@ import MovedNote from './moved_note'
 import TabBar from './tab_bar'
 import Text from './text'
 import Responsive from '../features/ui/util/responsive_component';
+import ProfileHeaderXSPlaceholder from './placeholder/profile_header_xs_placeholder'
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -59,6 +60,7 @@ class ProfileHeader extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     onEditProfile: PropTypes.func.isRequired,
     openProfileOptionsPopover: PropTypes.func.isRequired,
+    isXS: PropTypes.bool,
   }
 
   state = {
@@ -96,9 +98,22 @@ class ProfileHeader extends ImmutablePureComponent {
       account,
       children,
       intl,
+      isXS
     } = this.props
     const { stickied } = this.state
 
+    if (isXS && !account) {
+      return (
+        <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.z1, _s.width100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+              <ProfileHeaderXSPlaceholder />
+            </div>
+          </div>
+        </div>
+      )
+    }
+
     const tabs = !account ? null : [
       {
         to: `/${account.get('acct')}`,
@@ -126,7 +141,7 @@ class ProfileHeader extends ImmutablePureComponent {
       })
     }
 
-    const headerSrc = !!account ? account.get('header') : ''
+    const headerSrc = !!account ? account.get('header') : undefined
     const headerMissing = headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !headerSrc
     const avatarSize = headerMissing ? 75 : 150
     const top = headerMissing ? -46 : -380
@@ -290,7 +305,20 @@ class ProfileHeader extends ImmutablePureComponent {
 
                   <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
                     <div className={avatarContainerClasses}>
+                      {
+                        account &&
                         <Avatar size={avatarSize} account={account} noHover />
+                      }
+                      {
+                        !account &&
+                        <div
+                          className={[_s.default, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
+                          style={{
+                            width: `${avatarSize}px`,
+                            height: `${avatarSize}px`,
+                          }}
+                        />
+                      }
                     </div>
 
                     <div className={[_s.default, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>

app/javascript/gabsocial/components/status_list.js

@@ -234,7 +234,6 @@ class StatusList extends ImmutablePureComponent {
           <StatusPlaceholder />
           <StatusPlaceholder />
           <StatusPlaceholder />
-          <StatusPlaceholder />
         </Fragment>
       )
     }

app/javascript/gabsocial/features/account_gallery.js

@@ -7,6 +7,7 @@ import ColumnIndicator from '../components/column_indicator'
 import MediaItem from '../components/media_item'
 import LoadMore from '../components/load_more'
 import Block from '../components/block'
+import MediaGalleryPlaceholder from '../components/placeholder/media_gallery_placeholder'
 
 const messages = defineMessages({
   none: { id: 'account_gallery.none', defaultMessage: 'No media to show.' },
@@ -125,7 +126,9 @@ class AccountGallery extends ImmutablePureComponent {
 
           {
             isLoading && attachments.size === 0 &&
-            <ColumnIndicator type='loading' />
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+              <MediaGalleryPlaceholder />
+            </div>
           }
 
           {

app/javascript/gabsocial/features/account_timeline.js

@@ -74,7 +74,6 @@ class AccountTimeline extends ImmutablePureComponent {
 
   render() {
     const {
-      account,
       statusIds,
       featuredStatusIds,
       isLoading,
@@ -82,8 +81,6 @@ class AccountTimeline extends ImmutablePureComponent {
       intl
     } = this.props
 
-    if (!account) return null
-
     return (
       <StatusList
         scrollKey='account_timeline'

app/javascript/gabsocial/features/bookmarked_statuses.js

@@ -37,7 +37,12 @@ class BookmarkedStatuses extends ImmutablePureComponent {
   }, 300, { leading: true })
 
   render() {
-    const { statusIds, hasMore, isLoading, isMyAccount } = this.props
+    const {
+      statusIds,
+      hasMore,
+      isLoading,
+      isMyAccount,
+    } = this.props
 
     if (!isMyAccount) {
       return <ColumnIndicator type='missing' />

app/javascript/gabsocial/features/followers.js

@@ -10,6 +10,7 @@ import Account from '../components/account'
 import ScrollableList from '../components/scrollable_list'
 import Block from '../components/block'
 import Heading from '../components/heading'
+import AccountPlaceholder from '../components/placeholder/account_placeholder'
 
 const mapStateToProps = (state, { account }) => {
   const accountId = !!account ? account.get('id') : -1
@@ -73,8 +74,6 @@ class Followers extends ImmutablePureComponent {
       isLoading,
     } = this.props
 
-    if (!account) return null
-
     return (
       <Block>
         <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
@@ -87,11 +86,14 @@ class Followers extends ImmutablePureComponent {
             scrollKey='followers'
             hasMore={hasMore}
             isLoading={isLoading}
+            showLoading={isLoading}
             onLoadMore={this.handleLoadMore}
+            placeholderComponent={AccountPlaceholder}
+            placeholderCount={4}
             emptyMessage={intl.formatMessage(messages.empty)}
           >
             {
-              accountIds && accountIds.map((id) => (
+              account && accountIds && accountIds.map((id) => (
                 <Account key={`follower-${id}`} id={id} compact withBio />
               ))
             }

app/javascript/gabsocial/features/following.js

@@ -10,6 +10,7 @@ import Account from '../components/account'
 import ScrollableList from '../components/scrollable_list'
 import Block from '../components/block'
 import Heading from '../components/heading'
+import AccountPlaceholder from '../components/placeholder/account_placeholder'
 
 const mapStateToProps = (state, { account }) => {
   const accountId = !!account ? account.get('id') : -1
@@ -73,8 +74,6 @@ class Following extends ImmutablePureComponent {
       isLoading,
     } = this.props
 
-    if (!account) return null
-
     return (
       <Block>
         <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
@@ -87,11 +86,14 @@ class Following extends ImmutablePureComponent {
             scrollKey='following'
             hasMore={hasMore}
             isLoading={isLoading}
+            showLoading={isLoading}
             onLoadMore={this.handleLoadMore}
+            placeholderComponent={AccountPlaceholder}
+            placeholderCount={4}
             emptyMessage={intl.formatMessage(messages.empty)}
           >
             {
-              accountIds && accountIds.map((id) => (
+              account && accountIds && accountIds.map((id) => (
                 <Account key={`following-${id}`} id={id} compact withBio />
               ))
             }

app/javascript/gabsocial/features/liked_statuses.js

@@ -37,7 +37,12 @@ class LikedStatuses extends ImmutablePureComponent {
   }, 300, { leading: true })
 
   render() {
-    const { statusIds, hasMore, isLoading, isMyAccount } = this.props
+    const {
+      statusIds,
+      hasMore,
+      isLoading,
+      isMyAccount,
+    } = this.props
 
     if (!isMyAccount) {
       return <ColumnIndicator type='missing' />

app/javascript/gabsocial/features/lists_directory.js

@@ -48,10 +48,6 @@ class ListsDirectory extends ImmutablePureComponent {
     const { intl, lists } = this.props
     const { fetched } = this.state
 
-    if (lists.size === 0 && !fetched) {
-      return <ColumnIndicator type='loading' />
-    }
-
     const emptyMessage = intl.formatMessage(messages.empty)
 
     const listItems = lists.map(list => ({
@@ -62,6 +58,7 @@ class ListsDirectory extends ImmutablePureComponent {
     return (
       <List
         scrollKey='lists'
+        showLoading={lists.size === 0 && !fetched}
         emptyMessage={emptyMessage}
         items={listItems}
       />

app/javascript/gabsocial/features/notifications.js

@@ -12,7 +12,6 @@ import {
   forceDequeueNotifications,
 } from '../actions/notifications'
 import NotificationContainer from '../containers/notification_container'
-import ColumnIndicator from '../components/column_indicator'
 import ScrollableList from '../components/scrollable_list'
 import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
 import Block from '../components/block'
@@ -122,22 +121,18 @@ class Notifications extends ImmutablePureComponent {
     } = this.props
     const { changedTabs } = this.state
 
-    if (isLoading && changedTabs) {
-      return <ColumnIndicator type='loading' />
-    }
-
     let scrollableContent = null
 
-    if (isLoading && this.scrollableContent) {
+    if (isLoading && this.scrollableContent && !changedTabs) {
       scrollableContent = this.scrollableContent
-    } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter !== 'follow') {
+    } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter !== 'follow' && !changedTabs) {
       scrollableContent = sortedNotifications.map((item, index) => (
         <NotificationContainer
           key={`notification-${index}`}
           notification={item}
         />
       ))
-    } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter === 'follow') {      
+    } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter === 'follow' && !changedTabs) {      
       const followNotifications = []
       sortedNotifications.forEach((block) => {
         if (block) {
@@ -175,7 +170,7 @@ class Notifications extends ImmutablePureComponent {
           <ScrollableList
             scrollKey='notifications'
             isLoading={isLoading}
-            showLoading={isLoading && sortedNotifications.size === 0}
+            showLoading={true /*(isLoading && sortedNotifications.size === 0) || changedTabs*/}
             hasMore={hasMore}
             emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
             onLoadMore={this.handleLoadOlder}

app/javascript/gabsocial/layouts/profile_layout.js

@@ -63,7 +63,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
               <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
                 <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
 
-                  <ProfileHeader account={account}>
+                  <ProfileHeader account={account} isXS>
                     <ProfileInfoPanel account={account} noPanel />
                     <Divider isSmall />
                     <ProfileStatsPanel account={account} noPanel />

app/javascript/gabsocial/pages/profile_page.js

@@ -72,10 +72,7 @@ class ProfilePage extends ImmutablePureComponent {
       >
         <PageTitle path={`${name} (@${username})`} />
         {
-          !account && <ColumnIndicator type='loading' />
+          !unavailable &&
-        }
-        {
-          !!account && !unavailable &&
           React.cloneElement(children, {
             account,
           })