Added placeholder loaders to multiple components

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

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)}
-        headerButtonTo={`/${account.get('acct')}/media`}
+        headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
+        headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
       > 
-        {
-          attachments.size > 0 &&
-          <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
-            {
-              attachments.slice(0, 16).map((attachment, i) => (
-                <MediaItem
-                  isSmall
-                  key={attachment.get('id')}
-                  attachment={attachment}
-                  account={account}
-                />
-              ))
-            }
-          </div>
-        }
+        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+          {
+            !!account && attachments.size > 0 &&
+            attachments.slice(0, 16).map((attachment, i) => (
+              <MediaItem
+                isSmall
+                key={attachment.get('id')}
+                attachment={attachment}
+                account={account}
+              />
+            ))
+          }
+          {
+            !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 => (
-              <Account
+            arr.map((accountId) => (
+              <Child
                 compact
                 showDismiss
                 key={accountId}