random-mirrors
/
gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added loading placeholder components 

• Added:
- loading placeholder components

• Todo:
- Ensure responsiveness on all
This commit is contained in:
mgabdev 2020-07-28 15:06:45 -05:00
parent 0a719d8b6b
commit 26b7995f7d
11 changed files with 387 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/gabsocial/components/placeholder/account_placeholder.js Normal file
View File

@ -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>
)
}
}

33
app/javascript/gabsocial/components/placeholder/comment_placeholder.js Normal file
View File

@ -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>
)
}
}

35
app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js Normal file
View File

@ -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>
)
}
}

34
app/javascript/gabsocial/components/placeholder/list_item_placeholder.js Normal file
View File

@ -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>
)
}
}

26
app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js Normal file
View File

@ -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>
)
}
}

52
app/javascript/gabsocial/components/placeholder/notification_placeholder.js Normal file
View File

@ -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>
)
}
}

49
app/javascript/gabsocial/components/placeholder/placeholder_layout.js Normal file
View File

@ -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>
)
}
}

20
app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js Normal file
View File

@ -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>
)
}
}

24
app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js Normal file
View File

@ -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>
)
}
}

48
app/javascript/gabsocial/components/placeholder/status_placeholder.js Normal file
View File

@ -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>
)
}
}

31
app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js Normal file
View File

@ -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>
)
}
}