Updated placeholder component structures

• Updated:
- placeholder component structures
This commit is contained in:
mgabdev 2020-08-14 12:44:58 -05:00
parent 261ba8937b
commit 67e1082cf5
8 changed files with 76 additions and 79 deletions

View File

@ -2,12 +2,7 @@ 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,
isSmall: PropTypes.bool,
}
class AccountPlaceholder extends PureComponent {
render() {
const { isLast, isSmall } = this.props
@ -46,3 +41,10 @@ export default class AccountPlaceholder extends PureComponent {
}
}
AccountPlaceholder.propTypes = {
isLast: PropTypes.bool,
isSmall: PropTypes.bool,
}
export default AccountPlaceholder

View File

@ -4,10 +4,6 @@ import PlaceholderLayout from './placeholder_layout'
export default class CommentPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
render() {
const classes = CX({
default: 1,

View File

@ -2,11 +2,7 @@ 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,
}
class GroupListItemPlaceholder extends PureComponent {
render() {
const { isLast } = this.props
@ -33,3 +29,9 @@ export default class GroupListItemPlaceholder extends PureComponent {
}
}
GroupListItemPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default GroupListItemPlaceholder

View File

@ -3,11 +3,7 @@ import { getRandomInt } from '../../utils/numbers'
import PlaceholderLayout from './placeholder_layout'
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
export default class ListItemPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
class ListItemPlaceholder extends PureComponent {
render() {
const { isLast } = this.props
@ -44,3 +40,9 @@ export default class ListItemPlaceholder extends PureComponent {
}
}
ListItemPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default ListItemPlaceholder

View File

@ -2,13 +2,7 @@ import PlaceholderLayout from './placeholder_layout'
export default class MediaGalleryPlaceholder extends PureComponent {
static propTypes = {
type: PropTypes.string,
}
render() {
const { type } = this.props
return (
<div className={[_s.default, _s.px5, _s.py5].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 196'>

View File

@ -7,11 +7,7 @@ import { getRandomInt } from '../../utils/numbers'
import ResponsiveComponent from '../../features/ui/util/responsive_component'
import PlaceholderLayout from './placeholder_layout'
export default class NotificationPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
class NotificationPlaceholder extends PureComponent {
render() {
const { isLast } = this.props
@ -86,3 +82,9 @@ export default class NotificationPlaceholder extends PureComponent {
}
}
NotificationPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default NotificationPlaceholder

View File

@ -2,26 +2,8 @@ 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,
@ -47,3 +29,20 @@ class PlaceholderLayout extends PureComponent {
}
}
const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading...' },
})
const mapStateToProps = (state) => ({
theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
})
PlaceholderLayout.propTypes = {
children: PropTypes.node,
intl: PropTypes.object.isRequired,
theme: PropTypes.string.isRequired,
viewBox: PropTypes.object.isRequired,
}
export default injectIntl(connect(mapStateToProps)(PlaceholderLayout))

View File

@ -4,7 +4,7 @@ export default class ProfileInfoPanelPlaceholder extends PureComponent {
render() {
return (
<div className={[_s.default]}>
<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' />