Updated placeholder component structures
• Updated: - placeholder component structures
This commit is contained in:
parent
261ba8937b
commit
67e1082cf5
@ -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
|
@ -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,
|
||||
|
@ -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
|
@ -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
|
||||
|
@ -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'>
|
||||
|
@ -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
|
||||
|
@ -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))
|
||||
|
@ -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' />
|
||||
|
Loading…
Reference in New Issue
Block a user