Added loading placeholder components

• Added:
- loading placeholder components

• Todo:
- Ensure responsiveness on all

app/javascript/gabsocial/components/placeholder/account_placeholder.js

@@ -0,0 +1,35 @@
+import { CX } from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class AccountPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    isLast: PropTypes.bool,
+  }
+
+  render() {
+    const { isLast } = this.props
+
+    const classes = CX({
+      default: 1,
+      px15: 1,
+      py7: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
+    const width = getRandomInt(120, 300)
+
+    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>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/comment_placeholder.js

@@ -0,0 +1,33 @@
+import { CX } from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class CommentPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    isLast: PropTypes.bool,
+  }
+
+  render() {
+    const classes = CX({
+      default: 1,
+      px15: 1,
+      py10: 1,
+    })
+
+    const width = getRandomInt(200, 350)
+
+    return (
+      <div className={classes}>
+        <PlaceholderLayout viewBox='0 0 400 52'>
+          <rect x='27' y='0' rx='4' ry='4' width={width} height='40' /> 
+          <circle cx='10' cy='11' r='10' />
+          <rect x='30' y='45' rx='4' ry='4' width='24' height='6' /> 
+          <rect x='62' y='45' rx='4' ry='4' width='28' height='6' /> 
+          <rect x='98' y='45' rx='4' ry='4' width='18' height='6' />     
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js

@@ -0,0 +1,35 @@
+import { CX } from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class GroupListItemPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    isLast: PropTypes.bool,
+  }
+
+  render() {
+    const { isLast } = this.props
+
+    const classes = CX({
+      default: 1,
+      px15: 1,
+      py7: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
+    const width = getRandomInt(120, 230)
+
+    return (
+      <div className={classes}>
+        <PlaceholderLayout viewBox='0 0 400 60'>
+          <rect x='0' y='0' rx='5' ry='5' width='108' height='60' /> 
+          <rect x='126' y='10' rx='5' ry='5' width={width} height='14' /> 
+          <rect x='126' y='36' rx='5' ry='5' width='108' height='14' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/list_item_placeholder.js

@@ -0,0 +1,34 @@
+import { CX } from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class ListItemPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    isLast: PropTypes.bool,
+  }
+
+  render() {
+    const { isLast } = this.props
+
+    const classes = CX({
+      default: 1,
+      px15: 1,
+      py15: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
+    const width = getRandomInt(120, 375)
+
+    return (
+      <div className={classes}>
+        <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>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js

@@ -0,0 +1,26 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class MediaGalleryPanelPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    loaderProps: PropTypes.object,
+  }
+
+  render() {
+    return (
+      <div className={_s.default}>
+        <PlaceholderLayout viewBox='0 0 334 164'>
+          <rect x='0' y='0' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='86' y='0' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='172' y='0' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='258' y='0' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='0' y='86' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='86' y='86' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='172' y='86' rx='4' ry='4' width='76' height='76' /> 
+          <rect x='258' y='86' rx='4' ry='4' width='76' height='76' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/notification_placeholder.js

@@ -0,0 +1,52 @@
+import { CX } from '../../constants'
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class NotificationPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    isLast: PropTypes.bool,
+  }
+
+  render() {
+    const { isLast } = this.props
+
+    const classes = 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>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/placeholder_layout.js

@@ -0,0 +1,49 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ContentLoader from 'react-content-loader'
+import { DEFAULT_THEME } from '../../constants'
+
+const messages = defineMessages({
+  loading: { id: 'loading_indicator.label', defaultMessage: 'Loading..' },
+})
+
+const mapStateToProps = (state) => ({
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps)
+class PlaceholderLayout extends PureComponent {
+  
+  static propTypes = {
+    children: PropTypes.node,
+    intl: PropTypes.object.isRequired,
+    theme: PropTypes.string.isRequired,
+    viewBox: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      theme,
+      viewBox,
+    } = this.props
+
+    const title = intl.formatMessage(messages.loading)
+    const backgroundColor = theme !== 'light' ? '#555' : '#f3f3f3'
+    const foregroundColor = theme !== 'light' ? '#888' : '#ecebeb'
+
+    return (
+      <ContentLoader
+        title={title}
+        speed={1.25}
+        viewBox={viewBox}
+        backgroundColor={backgroundColor}
+        foregroundColor={foregroundColor}
+      >
+        {this.props.children}
+      </ContentLoader>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js

@@ -0,0 +1,20 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class ProfileInfoPanelPlaceholder extends PureComponent {
+  
+  render() {
+    return (
+      <div className={[_s.default]}>
+        <PlaceholderLayout viewBox='0 0 340 108'>
+          <rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> 
+          <rect x='0' y='18' rx='4' ry='4' width='314' height='8' /> 
+          <rect x='0' y='36' rx='4' ry='4' width='234' height='8' /> 
+          <rect x='0' y='54' rx='4' ry='4' width='204' height='8' /> 
+          <rect x='0' y='94' rx='4' ry='4' width='134' height='8' /> 
+          <rect x='10' y='78' rx='3' ry='3' width='320' height='1' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js

@@ -0,0 +1,24 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class ProfileStatsPanelPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    loaderProps: PropTypes.object,
+  }
+
+  render() {
+    return (
+      <div className={_s.default}>
+        <PlaceholderLayout viewBox='0 0 178 20'>
+          <rect x='2' y='2' rx='4' ry='4' width='24' height='6' /> 
+          <rect x='2' y='12' rx='4' ry='4' width='38' height='6' /> 
+          <rect x='58' y='2' rx='4' ry='4' width='24' height='6' /> 
+          <rect x='58' y='12' rx='4' ry='4' width='38' height='6' /> 
+          <rect x='114' y='2' rx='4' ry='4' width='24' height='6' /> 
+          <rect x='114' y='12' rx='4' ry='4' width='38' height='6' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/placeholder/status_placeholder.js

@@ -0,0 +1,48 @@
+import { CX } from '../../constants'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class StatusPlaceholder extends PureComponent {
+
+  render() {
+    const containerClasses = CX({
+      default: 1,
+      px15: 1,
+      mt5: 1,
+      mb15: 1,
+      py10: 1,
+      radiusSmall: 1,
+      bgPrimary: 1,
+      boxShadowBlock: 1,
+    })
+
+    const containerClassesXS = CX({
+      default: 1,
+      bgPrimary: 1,
+      boxShadowBlock: 1,
+      borderTop1PX: 1,
+      px15: 1,
+      py10: 1,
+      mb15: 1,
+      borderColorSecondary: 1,
+    })
+
+    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>
+    )
+
+  }
+
+}

app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js

@@ -0,0 +1,31 @@
+import { getRandomInt } from '../../utils/numbers'
+import PlaceholderLayout from './placeholder_layout'
+
+export default class TrendsItemPlaceholder extends PureComponent {
+  
+  render() {
+    const title1Width = getRandomInt(280, 330)
+    const title2Width = getRandomInt(200, 305)
+    const title3Width = getRandomInt(100, 220)
+
+    const subtitle2Width = getRandomInt(140, 240)
+    const subtitle3Width = getRandomInt(120, 225)
+
+    return (
+      <div className={[_s.default, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
+        <PlaceholderLayout viewBox='0 0 340 138'>
+          <rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' />
+          <rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' />
+          <rect x='0' y='43' rx='3' ry='3' width={title3Width} height='12' />
+          <rect x='0' y='67' rx='3' ry='3' width='260' height='8' />
+          <rect x='0' y='85' rx='3' ry='3' width={subtitle2Width} height='8' />
+          <rect x='0' y='101' rx='3' ry='3' width={subtitle3Width} height='8' />
+          <rect x='0' y='120' rx='3' ry='3' width='20' height='8' />
+          <rect x='30' y='120' rx='3' ry='3' width='120' height='8' />
+          <rect x='160' y='120' rx='3' ry='3' width='20' height='8' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}