Updated Placeholder Responsiveness and Added new Placeholders

• Updated: - Placeholder Responsiveness • Added: - new Placeholders
2020-07-29 15:40:47 -05:00 · 2020-07-29 15:40:47 -05:00 · 13127960c4
commit 13127960c4
parent 73234ac52b
24 changed files with 256 additions and 89 deletions
--- a/app/javascript/gabsocial/components/list.js
+++ b/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) => (
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/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 />
--- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
@ -38,7 +38,7 @@ class ProfileStatsPanel extends ImmutablePureComponent {
    return (
      <Wrapper>
        {
-          !account &&
+          !account && !noPanel &&
          <ProfileStatsPanelPlaceholder />
        }
        {
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/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}
              />
            ))
--- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js
+++ b/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,12 +22,24 @@ export default class AccountPlaceholder extends PureComponent {

    const width = getRandomInt(120, 300)

+    if (isSmall) {
+      return (
+        <div className={classes}>
+          <PlaceholderLayout viewBox='0 0 400 60'>
+            <circle cx='27' cy='28' r='27' />
+            <rect x='72' y='10' rx='5' ry='5' width={width} height='14' /> 
+            <rect x='72' y='36' rx='5' ry='5' width='108' height='14' /> 
+          </PlaceholderLayout>
+        </div>
+      )
+    }
+
    return (
      <div className={classes}>
-        <PlaceholderLayout viewBox='0 0 400 60'>
-          <circle cx='27' cy='28' r='27' />
-          <rect x='72' y='10' rx='5' ry='5' width={width} height='14' /> 
-          <rect x='72' y='36' rx='5' ry='5' width='108' height='14' /> 
+        <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>
    )
--- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
+++ b/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>
    )
  }

--- a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
+++ b/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}>
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
+++ b/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>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
+++ b/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,33 +24,64 @@ 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 (
-      <div className={classes}>
-        <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
-          <PlaceholderLayout viewBox='0 0 400 170'>
-            <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' /> 
-            <rect x={left} y='34' rx='4' ry='4' width='12' height='8' /> 
-            <circle cx='8' cy='10' r='8' /> 
-            <circle cx='36' cy='12' r='12' />
-            <rect x='24' y='55' rx='0' ry='0' width='375' height='1' /> 
-            <rect x='24' y='166' rx='0' ry='0' width='475' height='1' /> 
-            <rect x='24' y='55' rx='0' ry='0' width='1' height='112' /> 
-            <rect x='399' y='55' rx='0' ry='0' width='1' height='112' />
-            <rect x='32' y='64' rx='4' ry='4' width={width1} height='8' /> 
-            <rect x='32' y='80' rx='4' ry='4' width='23' height='8' /> 
-            <rect x='32' y='102' rx='4' ry='4' width='337' height='8' /> 
-            <rect x='32' y='118' rx='4' ry='4' width='290' height='8' /> 
-            <rect x='32' y='134' rx='4' ry='4' width='216' height='8' />
-            <rect x='32' y='152' rx='4' ry='4' width='23' height='8' /> 
-            <rect x='62' y='152' rx='4' ry='4' width='60' height='8' /> 
-            <rect x='130' y='152' rx='4' ry='4' width='26' height='8' />
-          </PlaceholderLayout>
-        </div>
-      </div>
+      <Fragment>
+        <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
+          <div className={classes}>
+            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+              <PlaceholderLayout viewBox='0 0 400 170'>
+                <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' /> 
+                <rect x={left} y='34' rx='4' ry='4' width='12' height='8' /> 
+                <circle cx='8' cy='10' r='8' /> 
+                <circle cx='36' cy='12' r='12' />
+                <rect x='24' y='55' rx='0' ry='0' width='375' height='1' /> 
+                <rect x='24' y='166' rx='0' ry='0' width='475' height='1' /> 
+                <rect x='24' y='55' rx='0' ry='0' width='1' height='112' /> 
+                <rect x='399' y='55' rx='0' ry='0' width='1' height='112' />
+                <rect x='32' y='64' rx='4' ry='4' width={width1} height='8' /> 
+                <rect x='32' y='80' rx='4' ry='4' width='23' height='8' /> 
+                <rect x='32' y='102' rx='4' ry='4' width='337' height='8' /> 
+                <rect x='32' y='118' rx='4' ry='4' width='290' height='8' /> 
+                <rect x='32' y='134' rx='4' ry='4' width='216' height='8' />
+                <rect x='32' y='152' rx='4' ry='4' width='23' height='8' /> 
+                <rect x='62' y='152' rx='4' ry='4' width='60' height='8' /> 
+                <rect x='130' y='152' rx='4' ry='4' width='26' height='8' />
+              </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>
    )
  }

--- a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
+++ b/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>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
@ -1,10 +1,6 @@
 import PlaceholderLayout from './placeholder_layout'

 export default class ProfileStatsPanelPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    loaderProps: PropTypes.object,
-  }

  render() {
    return (
--- a/app/javascript/gabsocial/components/placeholder/status_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
@ -1,5 +1,10 @@
-import { CX } from '../../constants'
-import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
+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 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
-        classNames={containerClasses}
-        classNamesXS={containerClassesXS}
-      >
-        <PlaceholderLayout viewBox='0 0 476 136'>
-          <rect x='48' y='8' width='88' 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='72' width='380' height='6' rx='3' />
-          <rect x='0' y='88' width='178' height='6' rx='3' />
-          <circle cx='20' cy='20' r='20' />
-        </PlaceholderLayout>
-      </ResponsiveClassesComponent>
+      <Fragment>
+        <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
+          <div className={containerClasses}>
+            <PlaceholderLayout viewBox='0 0 476 136'>
+              <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={width1} height='6' rx='3' />
+              <rect x='0' y='72' width={width2} height='6' rx='3' />
+              <rect x='0' y='88' width={width3} height='6' rx='3' />
+              <circle cx='20' cy='20' r='20' />
+            </PlaceholderLayout>
+          </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>
    )

  }
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/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}>
-                      <Avatar size={avatarSize} account={account} noHover />
+                      {
+                        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(' ')}>
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@ -234,7 +234,6 @@ class StatusList extends ImmutablePureComponent {
          <StatusPlaceholder />
          <StatusPlaceholder />
          <StatusPlaceholder />
-          <StatusPlaceholder />
        </Fragment>
      )
    }
--- a/app/javascript/gabsocial/features/account_gallery.js
+++ b/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>
          }

          {
--- a/app/javascript/gabsocial/features/account_timeline.js
+++ b/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'
--- a/app/javascript/gabsocial/features/bookmarked_statuses.js
+++ b/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' />
--- a/app/javascript/gabsocial/features/followers.js
+++ b/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 />
              ))
            }
--- a/app/javascript/gabsocial/features/following.js
+++ b/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 />
              ))
            }
--- a/app/javascript/gabsocial/features/liked_statuses.js
+++ b/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' />
--- a/app/javascript/gabsocial/features/lists_directory.js
+++ b/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}
      />
--- a/app/javascript/gabsocial/features/notifications.js
+++ b/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}
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/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 />
--- a/app/javascript/gabsocial/pages/profile_page.js
+++ b/app/javascript/gabsocial/pages/profile_page.js
@ -72,10 +72,7 @@ class ProfilePage extends ImmutablePureComponent {
      >
        <PageTitle path={`${name} (@${username})`} />
        {
-          !account && <ColumnIndicator type='loading' />
-        }
-        {
-          !!account && !unavailable &&
+          !unavailable &&
          React.cloneElement(children, {
            account,
          })