Added placeholder loaders to multiple components

• Added:
- placeholder loaders to multiple components
- status, panels, comment, lists, group items, notifications

app/javascript/gabsocial/components/list.js

@@ -4,6 +4,7 @@ import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
 import Dummy from './dummy'
+import ListItemPlaceholder from './placeholder/list_item_placeholder'
 
 export default class List extends ImmutablePureComponent {
 
@@ -45,6 +46,8 @@ export default class List extends ImmutablePureComponent {
           scrollKey={scrollKey}
           emptyMessage={emptyMessage}
           showLoading={showLoading}
+          placeholderComponent={ListItemPlaceholder}
+          placeholderCount={6}
         >
           {
             items.map((item, i) => (

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

@@ -5,6 +5,7 @@ import { fetchGroups } from '../../actions/groups'
 import PanelLayout from './panel_layout'
 import GroupListItem from '../group_list_item'
 import ScrollableList from '../scrollable_list'
+import GroupListItemPlaceholder from '../placeholder/group_list_item_placeholder'
 
 const messages = defineMessages({
   title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
@@ -86,6 +87,8 @@ class GroupSidebarPanel extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='groups_panel'
           showLoading={!fetched}
+          placeholderComponent={GroupListItemPlaceholder}
+          placeholderCount={6}
         >
           {
             groupIds && groupIds.slice(0, maxCount).map((groupId, i) => (

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

@@ -5,6 +5,7 @@ import { expandAccountMediaTimeline } from '../../actions/timelines'
 import { getAccountGallery } from '../../selectors'
 import PanelLayout from './panel_layout'
 import MediaItem from '../media_item'
+import MediaGalleryPanelPlaceholder from '../placeholder/media_gallery_panel_placeholder'
 
 const messages = defineMessages({
   title: { id: 'media_gallery_panel.title', defaultMessage: 'Media' },
@@ -16,6 +17,7 @@ const mapStateToProps = (state, { account }) => {
 
   return {
     accountId,
+    isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading'], true), 
     attachments: getAccountGallery(state, accountId),
   }
 }
@@ -29,6 +31,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     accountId: PropTypes.string,
     account: ImmutablePropTypes.map,
+    isLoading: PropTypes.bool,
     attachments: ImmutablePropTypes.list.isRequired,
     intl: PropTypes.object.isRequired,
   }
@@ -49,35 +52,40 @@ class MediaGalleryPanel extends ImmutablePureComponent {
 
   render() {
     const {
-      intl,
       account,
-      attachments
+      attachments,
+      intl,
+      isLoading,
     } = this.props
 
-    if (!account || !attachments) return null
+    if (!attachments) return null
 
     return (
       <PanelLayout
         noPadding
         title={intl.formatMessage(messages.title)}
-        headerButtonTitle={intl.formatMessage(messages.show_all)}
+        headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
-        headerButtonTo={`/${account.get('acct')}/media`}
+        headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
       > 
-        {
+        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
-          attachments.size > 0 &&
+          {
-          <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+            !!account && attachments.size > 0 &&
-            {
+            attachments.slice(0, 16).map((attachment, i) => (
-              attachments.slice(0, 16).map((attachment, i) => (
+              <MediaItem
-                <MediaItem
+                isSmall
-                  isSmall
+                key={attachment.get('id')}
-                  key={attachment.get('id')}
+                attachment={attachment}
-                  attachment={attachment}
+                account={account}
-                  account={account}
+              />
-                />
+            ))
-              ))
+          }
-            }
+          {
-          </div>
+            !account || (attachments.size === 0 && isLoading) &&
-        }
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+              <MediaGalleryPanelPlaceholder />
+            </div>
+          }
+        </div>
       </PanelLayout>
     )
   }

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

@@ -9,6 +9,7 @@ import Divider from '../divider'
 import Icon from '../icon'
 import Text from '../text'
 import Dummy from '../dummy'
+import ProfileInfoPanelPlaceholder from '../placeholder/profile_info_panel_placeholder'
 
 const messages = defineMessages({
   title: { id: 'about', defaultMessage: 'About' },
@@ -35,7 +36,15 @@ class ProfileInfoPanel extends ImmutablePureComponent {
       noPanel
     } = this.props
 
-    if (!account) return null
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
+    if (!account) {
+      return (
+        <Wrapper title={intl.formatMessage(messages.title)}>
+          <ProfileInfoPanelPlaceholder />
+        </Wrapper>
+      )
+    }
 
     const fields = account.get('fields')
     const content = { __html: account.get('note_emojified') }
@@ -46,8 +55,6 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const isInvestor = account.get('is_investor')
     const hasBadges = isPro || isDonor || isInvestor
 
-    const Wrapper = noPanel ? Dummy : PanelLayout
-
     return (
       <Wrapper title={intl.formatMessage(messages.title)}>
         <div className={[_s.default].join(' ')}>

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

@@ -6,6 +6,7 @@ import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import UserStat from '../user_stat'
 import Dummy from '../dummy'
+import ProfileStatsPanelPlaceholder from '../placeholder/profile_stats_panel_placeholder'
 import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
 const messages = defineMessages({
@@ -32,12 +33,14 @@ class ProfileStatsPanel extends ImmutablePureComponent {
       noPanel
     } = this.props
 
-    if (!account) return null
-
     const Wrapper = noPanel ? Dummy : PanelLayout
 
     return (
       <Wrapper>
+        {
+          !account &&
+          <ProfileStatsPanelPlaceholder />
+        }
         {
           !!account &&
           <ResponsiveClassesComponent

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

@@ -5,6 +5,7 @@ import { fetchGabTrends } from '../../actions/gab_trends'
 import PanelLayout from './panel_layout'
 import ScrollableList from '../scrollable_list'
 import TrendsItem from '../trends_item'
+import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
 
 const messages = defineMessages({
   title: { id: 'trends.title', defaultMessage: 'Trending right now' },
@@ -59,7 +60,9 @@ class TrendsPanel extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
         <ScrollableList
-          isLoading={isLoading}
+          showLoading={isLoading}
+          placeholderComponent={TrendsItemPlaceholder}
+          placeholderCount={8}
           scrollKey='trending-items'
         >
           {

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

@@ -5,7 +5,8 @@ import {
 } from '../../actions/suggestions'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import Account from '../../components/account'
+import Account from '../account'
+import AccountPlaceholder from '../placeholder/account_placeholder'
 import PanelLayout from './panel_layout'
 
 const messages = defineMessages({
@@ -16,6 +17,7 @@ const messages = defineMessages({
 
 const mapStateToProps = (state) => ({
   suggestions: state.getIn(['suggestions', 'related', 'items']),
+  isLoading: state.getIn(['suggestions', 'related', 'isLoading']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -33,6 +35,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     fetchRelatedSuggestions: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     suggestions: ImmutablePropTypes.list.isRequired,
+    isLoading: PropTypes.bool.isRequired,
     isLazy: PropTypes.bool,
   }
 
@@ -69,12 +72,16 @@ class WhoToFollowPanel extends ImmutablePureComponent {
   render() {
     const {
       intl,
+      isLoading,
       suggestions,
       dismissRelatedSuggestion,
     } = this.props
 
     if (suggestions.isEmpty()) return null
 
+    const Child = isLoading ? AccountPlaceholder : Account
+    const arr = isLoading ? Array.apply(null, { length: 6 }) : suggestions
+
     return (
       <PanelLayout
         noPadding
@@ -84,8 +91,8 @@ class WhoToFollowPanel extends ImmutablePureComponent {
       >
         <div className={_s.default}>
           {
-            suggestions.map(accountId => (
+            arr.map((accountId) => (
-              <Account
+              <Child
                 compact
                 showDismiss
                 key={accountId}

app/javascript/gabsocial/components/scrollable_list.js

@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import throttle from 'lodash.throttle'
 import { List as ImmutableList } from 'immutable'
 import IntersectionObserverArticle from './intersection_observer_article'
@@ -28,6 +29,8 @@ export default class ScrollableList extends PureComponent {
     children: PropTypes.node,
     onScrollToTop: PropTypes.func,
     onScroll: PropTypes.func,
+    placeholderComponent: PropTypes.node,
+    placeholderCount: PropTypes.node,
   }
 
   state = {
@@ -220,13 +223,34 @@ export default class ScrollableList extends PureComponent {
       hasMore,
       emptyMessage,
       onLoadMore,
+      placeholderComponent: Placeholder,
+      placeholderCount,
     } = this.props
     const childrenCount = React.Children.count(children);
 
     const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null
 
     if (showLoading) {
-      return <ColumnIndicator type='loading' />
+      if (Placeholder) {
+        return (
+          <Fragment>
+            {
+              Array.apply(null, {
+                length: placeholderCount
+              }).map((_, i) => (
+                <Placeholder
+                  key={`${scrollKey}-placeholder-${i}`}
+                  isLast={i === placeholderCount - 1}
+                />
+              ))
+            }
+          </Fragment>
+        )
+      }
+
+      return (
+        <ColumnIndicator type='loading' />
+      )
     } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
       return (
         <div onMouseMove={this.handleMouseMove}>

app/javascript/gabsocial/components/status.js

@@ -12,6 +12,7 @@ import { me, displayMedia } from '../initial_state'
 import scheduleIdleTask from '../utils/schedule_idle_task'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import CommentPlaceholder from './placeholder/comment_placeholder'
 import StatusContent from './status_content'
 import StatusPrepend from './status_prepend'
 import StatusActionBar from './status_action_bar'
@@ -413,6 +414,7 @@ class Status extends ImmutablePureComponent {
 
     if (isComment && !ancestorStatus && !isChild) {
       // Wait to load...
+      // return <StatusPlaceholder />
       if (contextType === 'feature') {
         return <ColumnIndicator type='loading' />
       }
@@ -585,46 +587,49 @@ class Status extends ImmutablePureComponent {
                       <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
                     </ResponsiveClassesComponent>
                   }
-
+                  
                   {
-                    status.get('replies_count') > 0 && !commentsLimited && !isNotification && descendantsIds && descendantsIds.size === 0 &&
+                    status.get('replies_count') > 0 && !isChild && !isNotification && !commentsLimited &&
                     <Fragment>
                       <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
-                      <ColumnIndicator type='loading' />
-                    </Fragment>
-                  }
 
-                  {
+                      <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
-                    descendantsIds && !isChild && !isNotification && descendantsIds.size > 0 && !commentsLimited &&
+                        <Text color='secondary' size='small'>
-                    <Fragment>
+                          {intl.formatMessage(messages.sortBy)}
-                      <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+                        </Text>
+                        <Button
+                          isText
+                          backgroundColor='none'
+                          color='secondary'
+                          className={_s.ml5}
+                          buttonRef={this.setCommentSortButtonRef}
+                          onClick={this.handleOnCommentSortOpen}
+                          disabled={descendantsIds.size === 0}
+                        >
+                          <Text color='inherit' weight='medium' size='small'>
+                            {sortByTitle}
+                          </Text>
+                        </Button>
+                      </div>
 
                       {
-                        !commentsLimited && descendantsIds.size > 1 &&
+                        descendantsIds.size === 0 &&
-                        <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
+                        <Fragment>
-                          <Text color='secondary' size='small'>
+                          <CommentPlaceholder />
-                            {intl.formatMessage(messages.sortBy)}
+                          <CommentPlaceholder />
-                          </Text>
+                          <CommentPlaceholder />
-                          <Button
+                        </Fragment>
-                            isText
+                      }
-                            backgroundColor='none'
+                      
-                            color='secondary'
+                      {
-                            className={_s.ml5}
+                        descendantsIds.size > 0 &&
-                            buttonRef={this.setCommentSortButtonRef}
+                        <CommentList
-                            onClick={this.handleOnCommentSortOpen}
+                          ancestorAccountId={status.getIn(['account', 'id'])}
-                          >
+                          commentsLimited={commentsLimited}
-                            <Text color='inherit' weight='medium' size='small'>
+                          descendants={descendantsIds}
-                              {sortByTitle}
+                          onViewComments={this.handleClick}
-                            </Text>
+                        />
-                          </Button>
-                        </div>
                       }
-                      <CommentList
-                        ancestorAccountId={status.getIn(['account', 'id'])}
-                        commentsLimited={commentsLimited}
-                        descendants={descendantsIds}
-                        onViewComments={this.handleClick}
-                      />
                     </Fragment>
                   }
                 </div>

app/javascript/gabsocial/components/status_list.js

@@ -9,9 +9,9 @@ import { dequeueTimeline } from '../actions/timelines'
 import { scrollTopTimeline } from '../actions/timelines'
 import { fetchStatus, fetchContext } from '../actions/statuses'
 import StatusContainer from '../containers/status_container'
+import StatusPlaceholder from './placeholder/status_placeholder'
 import ScrollableList from './scrollable_list'
 import TimelineQueueButtonHeader from './timeline_queue_button_header'
-import ColumnIndicator from './column_indicator'
 
 const makeGetStatusIds = () => createSelector([
   (state, { type, id }) => state.getIn(['settings', type], ImmutableMap()),
@@ -228,8 +228,15 @@ class StatusList extends ImmutablePureComponent {
     } = this.props
     const { fetchedContext, refreshing } = this.state
 
-    if (isPartial) {
+    if (isPartial || isLoading && statusIds.size === 0) {
-      return <ColumnIndicator type='loading' />
+      return (
+        <Fragment>
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+        </Fragment>
+      )
     }
 
     // : hack :

app/javascript/gabsocial/features/notifications.js

@@ -17,6 +17,7 @@ import ScrollableList from '../components/scrollable_list'
 import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
 import Block from '../components/block'
 import Account from '../components/account'
+import NotificationPlaceholder from '../components/placeholder/notification_placeholder'
 
 const mapStateToProps = (state) => ({
   notifications: state.getIn(['notifications', 'items']),
@@ -180,6 +181,8 @@ class Notifications extends ImmutablePureComponent {
             onLoadMore={this.handleLoadOlder}
             onScrollToTop={this.handleScrollToTop}
             onScroll={this.handleScroll}
+            placeholderComponent={NotificationPlaceholder}
+            placeholderCount={3}
           >
             {scrollableContent}
           </ScrollableList>

app/javascript/gabsocial/features/status.js

@@ -6,7 +6,7 @@ import {
   fetchContext,
 } from '../actions/statuses'
 import StatusContainer from '../containers/status_container'
-import ColumnIndicator from '../components/column_indicator'
+import StatusPlaceholder from '../components/placeholder/status_placeholder'
 
 const mapStateToProps = (state, props) => {
   const statusId = props.id || props.params.statusId
@@ -73,7 +73,7 @@ class Status extends ImmutablePureComponent {
     const { status } = this.props
   
     if (!status) {
-      return <ColumnIndicator type='loading' />
+      return <StatusPlaceholder />
     }
 
     return (