Updated Placeholder Responsiveness and Added new Placeholders

• Updated:
- Placeholder Responsiveness

• Added:
- new Placeholders

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}