Added placeholder loaders to multiple components

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

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 (