Commit 13127960 authored by mgabdev's avatar mgabdev

Updated Placeholder Responsiveness and Added new Placeholders

• Updated:
- Placeholder Responsiveness

• Added:
- new Placeholders
parent 73234ac5
......@@ -47,7 +47,7 @@ export default class List extends ImmutablePureComponent {
emptyMessage={emptyMessage}
showLoading={showLoading}
placeholderComponent={ListItemPlaceholder}
placeholderCount={6}
placeholderCount={12}
>
{
items.map((item, i) => (
......
......@@ -38,7 +38,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
const Wrapper = noPanel ? Dummy : PanelLayout
if (!account) {
if (!account && !noPanel) {
return (
<Wrapper title={intl.formatMessage(messages.title)}>
<ProfileInfoPanelPlaceholder />
......
......@@ -38,7 +38,7 @@ class ProfileStatsPanel extends ImmutablePureComponent {
return (
<Wrapper>
{
!account &&
!account && !noPanel &&
<ProfileStatsPanelPlaceholder />
}
{
......
......@@ -97,6 +97,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
showDismiss
key={accountId}
id={accountId}
isSmall={isLoading ? true : undefined}
dismissAction={dismissRelatedSuggestion}
/>
))
......
......@@ -6,10 +6,11 @@ export default class AccountPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
isSmall: PropTypes.bool,
}
render() {
const { isLast } = this.props
const { isLast, isSmall } = this.props
const classes = CX({
default: 1,
......@@ -21,12 +22,24 @@ export default class AccountPlaceholder extends PureComponent {
const width = getRandomInt(120, 300)
if (isSmall) {
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>
)
}
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 viewBox='0 0 400 32'>
<rect x="38" y="4" rx="3" ry="3" width="268" height="6" />
<circle cx="14" cy="14" r="14" />
<rect x="36" y="18" rx="3" ry="3" width="208" height="6" />
</PlaceholderLayout>
</div>
)
......
import { CX } from '../../constants'
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 {
......@@ -19,15 +20,26 @@ export default class ListItemPlaceholder extends PureComponent {
borderBottom1PX: !isLast,
})
const classesXS = CX({
default: 1,
px15: 1,
py7: 1,
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
})
const width = getRandomInt(120, 375)
return (
<div className={classes}>
<ResponsiveClassesComponent
classNames={classes}
classNamesXS={classesXS}
>
<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>
</ResponsiveClassesComponent>
)
}
......
......@@ -2,10 +2,6 @@ import PlaceholderLayout from './placeholder_layout'
export default class MediaGalleryPanelPlaceholder extends PureComponent {
static propTypes = {
loaderProps: PropTypes.object,
}
render() {
return (
<div className={_s.default}>
......
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'>
<rect x='0' y='0' rx='0' ry='0' width='96' height='96' />
<rect x='100' y='0' rx='0' ry='0' width='96' height='96' />
<rect x='300' y='0' rx='0' ry='0' width='96' height='96' />
<rect x='200' y='0' rx='0' ry='0' width='96' height='96' />
<rect x='-2' y='100' rx='0' ry='0' width='96' height='96' />
<rect x='100' y='100' rx='0' ry='0' width='96' height='96' />
<rect x='300' y='100' rx='0' ry='0' width='96' height='96' />
<rect x='200' y='100' rx='0' ry='0' width='96' height='96' />
</PlaceholderLayout>
</div>
)
}
}
\ No newline at end of file
import { CX } from '../../constants'
import { Fragment } from 'react'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../../constants'
import { getRandomInt } from '../../utils/numbers'
import ResponsiveComponent from '../../features/ui/util/responsive_component'
import PlaceholderLayout from './placeholder_layout'
export default class NotificationPlaceholder extends PureComponent {
......@@ -19,33 +24,64 @@ export default class NotificationPlaceholder extends PureComponent {
borderBottom1PX: !isLast,
})
const classesXS = 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>
<Fragment>
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<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>
</ResponsiveComponent>
<ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
<div className={classesXS}>
<div className={[_s.default, _s.py2, _s.px2].join(' ')}>
<PlaceholderLayout viewBox='0 0 380 200'>
<circle cx='20' cy='20' r='20' />
<rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
<rect x='0' y='76' rx='0' ry='0' width='1' height='120' />
<rect x='379' y='76' rx='0' ry='0' width='1' height='120' />
<rect x='0' y='76' rx='0' ry='0' width='380' height='1' />
<rect x='0' y='195' rx='0' ry='0' width='380' height='1' />
<rect x='12' y='90' rx='5' ry='5' width='280' height='10' />
<rect x='12' y='108' rx='5' ry='5' width='80' height='10' />
<rect x='12' y='136' rx='5' ry='5' width='320' height='10' />
<rect x='12' y='154' rx='5' ry='5' width='210' height='10' />
<rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
</PlaceholderLayout>
</div>
</div>
</ResponsiveComponent>
</Fragment>
)
}
......
import PlaceholderLayout from './placeholder_layout'
export default class ProfileHeaderXSPlaceholder extends PureComponent {
render() {
return (
<div className={[_s.default, _s.px10, _s.py10].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 660'>
<rect x='0' y='0' rx='0' ry='0' width='400' height='202' />
<circle cx='200' cy='200' r='54' />
<rect x='78' y='272' rx='9' ry='9' width='240' height='18' />
<rect x='110' y='301' rx='7' ry='7' width='180' height='14' />
<rect x='125' y='334' rx='23' ry='23' width='150' height='46' />
<rect x='0' y='402' rx='6' ry='6' width='380' height='12' />
<rect x='0' y='426' rx='6' ry='6' width='340' height='12' />
<rect x='0' y='450' rx='6' ry='6' width='200' height='12' />
<rect x='0' y='476' rx='0' ry='0' width='400' height='1' />
<rect x='0' y='492' rx='6' ry='6' width='240' height='12' />
<rect x='0' y='520' rx='0' ry='0' width='400' height='1' />
<circle cx='80' cy='574' r='30' />
<circle cx='200' cy='576' r='32' />
<circle cx='320' cy='576' r='32' />
<rect x='10' y='630' rx='11' ry='11' width='80' height='22' />
<rect x='110' y='630' rx='11' ry='11' width='80' height='22' />
<rect x='310' y='630' rx='11' ry='11' width='80' height='22' />
<rect x='210' y='630' rx='11' ry='11' width='80' height='22' />
</PlaceholderLayout>
</div>
)
}
}
\ No newline at end of file
import PlaceholderLayout from './placeholder_layout'
export default class ProfileStatsPanelPlaceholder extends PureComponent {
static propTypes = {
loaderProps: PropTypes.object,
}
render() {
return (
......
import { CX } from '../../constants'
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
import { Fragment } from 'react'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../../constants'
import { getRandomInt } from '../../utils/numbers'
import ResponsiveComponent from '../../features/ui/util/responsive_component'
import PlaceholderLayout from './placeholder_layout'
export default class StatusPlaceholder extends PureComponent {
......@@ -27,20 +32,38 @@ export default class StatusPlaceholder extends PureComponent {
borderColorSecondary: 1,
})
const width = getRandomInt(120, 375)
const width1 = getRandomInt(360, 450)
const width2 = getRandomInt(260, 360)
const width3 = getRandomInt(120, 260)
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>
<Fragment>
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<div className={containerClasses}>
<PlaceholderLayout viewBox='0 0 476 136'>
<rect x='48' y='8' width={width} height='6' rx='3' />
<rect x='48' y='26' width='52' height='6' rx='3' />
<rect x='0' y='56' width={width1} height='6' rx='3' />
<rect x='0' y='72' width={width2} height='6' rx='3' />
<rect x='0' y='88' width={width3} height='6' rx='3' />
<circle cx='20' cy='20' r='20' />
</PlaceholderLayout>
</div>
</ResponsiveComponent>
<ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
<div className={containerClassesXS}>
<PlaceholderLayout viewBox='0 0 380 140'>
<circle cx='25' cy='27' r='25' />
<rect x='64' y='12' rx='5' ry='5' width='235' height='10' />
<rect x='64' y='36' rx='5' ry='5' width='125' height='10' />
<rect x='0' y='72' rx='5' ry='5' width='370' height='10' />
<rect x='0' y='96' rx='5' ry='5' width='318' height='10' />
<rect x='0' y='122' rx='5' ry='5' width='264' height='10' />
</PlaceholderLayout>
</div>
</ResponsiveComponent>
</Fragment>
)
}
......
......@@ -21,6 +21,7 @@ import MovedNote from './moved_note'
import TabBar from './tab_bar'
import Text from './text'
import Responsive from '../features/ui/util/responsive_component';
import ProfileHeaderXSPlaceholder from './placeholder/profile_header_xs_placeholder'
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
......@@ -59,6 +60,7 @@ class ProfileHeader extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
onEditProfile: PropTypes.func.isRequired,
openProfileOptionsPopover: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
state = {
......@@ -96,9 +98,22 @@ class ProfileHeader extends ImmutablePureComponent {
account,
children,
intl,
isXS
} = this.props
const { stickied } = this.state
if (isXS && !account) {
return (
<div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}>
<ProfileHeaderXSPlaceholder />
</div>
</div>
</div>
)
}
const tabs = !account ? null : [
{
to: `/${account.get('acct')}`,
......@@ -126,7 +141,7 @@ class ProfileHeader extends ImmutablePureComponent {
})
}
const headerSrc = !!account ? account.get('header') : ''
const headerSrc = !!account ? account.get('header') : undefined
const headerMissing = headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !headerSrc
const avatarSize = headerMissing ? 75 : 150
const top = headerMissing ? -46 : -380
......@@ -290,7 +305,20 @@ class ProfileHeader extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
<div className={avatarContainerClasses}>
<Avatar size={avatarSize} account={account} noHover />
{
account &&
<Avatar size={avatarSize} account={account} noHover />
}
{
!account &&
<div
className={[_s.default, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
style={{
width: `${avatarSize}px`,
height: `${avatarSize}px`,
}}
/>
}
</div>
<div className={[_s.default, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
......
......@@ -234,7 +234,6 @@ class StatusList extends ImmutablePureComponent {
<StatusPlaceholder />
<StatusPlaceholder />
<StatusPlaceholder />
<StatusPlaceholder />
</Fragment>
)
}
......
......@@ -7,6 +7,7 @@ import ColumnIndicator from '../components/column_indicator'
import MediaItem from '../components/media_item'
import LoadMore from '../components/load_more'
import Block from '../components/block'
import MediaGalleryPlaceholder from '../components/placeholder/media_gallery_placeholder'
const messages = defineMessages({
none: { id: 'account_gallery.none', defaultMessage: 'No media to show.' },
......@@ -125,7 +126,9 @@ class AccountGallery extends ImmutablePureComponent {
{
isLoading && attachments.size === 0 &&
<ColumnIndicator type='loading' />
<div className={[_s.default, _s.width100PC].join(' ')}>
<MediaGalleryPlaceholder />
</div>
}
{
......
......@@ -74,7 +74,6 @@ class AccountTimeline extends ImmutablePureComponent {
render() {
const {
account,
statusIds,
featuredStatusIds,
isLoading,
......@@ -82,8 +81,6 @@ class AccountTimeline extends ImmutablePureComponent {
intl
} = this.props
if (!account) return null
return (
<StatusList
scrollKey='account_timeline'
......
......@@ -37,7 +37,12 @@ class BookmarkedStatuses extends ImmutablePureComponent {
}, 300, { leading: true })
render() {
const { statusIds, hasMore, isLoading, isMyAccount } = this.props
const {
statusIds,
hasMore,
isLoading,
isMyAccount,
} = this.props
if (!isMyAccount) {
return <ColumnIndicator type='missing' />
......
......@@ -10,6 +10,7 @@ import Account from '../components/account'
import ScrollableList from '../components/scrollable_list'
import Block from '../components/block'
import Heading from '../components/heading'
import AccountPlaceholder from '../components/placeholder/account_placeholder'
const mapStateToProps = (state, { account }) => {
const accountId = !!account ? account.get('id') : -1
......@@ -73,8 +74,6 @@ class Followers extends ImmutablePureComponent {
isLoading,
} = this.props
if (!account) return null
return (
<Block>
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
......@@ -87,11 +86,14 @@ class Followers extends ImmutablePureComponent {
scrollKey='followers'
hasMore={hasMore}
isLoading={isLoading}
showLoading={isLoading}
onLoadMore={this.handleLoadMore}
placeholderComponent={AccountPlaceholder}
placeholderCount={4}
emptyMessage={intl.formatMessage(messages.empty)}
>
{
accountIds && accountIds.map((id) => (
account && accountIds && accountIds.map((id) => (
<Account key={`follower-${id}`} id={id} compact withBio />
))
}
......
......@@ -10,6 +10,7 @@ import Account from '../components/account'
import ScrollableList from '../components/scrollable_list'
import Block from '../components/block'
import Heading from '../components/heading'
import AccountPlaceholder from '../components/placeholder/account_placeholder'
const mapStateToProps = (state, { account }) => {
const accountId = !!account ? account.get('id') : -1
......@@ -73,8 +74,6 @@ class Following extends ImmutablePureComponent {
isLoading,
} = this.props
if (!account) return null
return (
<Block>
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
......@@ -87,11 +86,14 @@ class Following extends ImmutablePureComponent {
scrollKey='following'
hasMore={hasMore}
isLoading={isLoading}
showLoading={isLoading}
onLoadMore={this.handleLoadMore}
placeholderComponent={AccountPlaceholder}
placeholderCount={4}
emptyMessage={intl.formatMessage(messages.empty)}
>
{
accountIds && accountIds.map((id) => (
account && accountIds && accountIds.map((id) => (
<Account key={`following-${id}`} id={id} compact withBio />
))
}
......
......@@ -37,7 +37,12 @@ class LikedStatuses extends ImmutablePureComponent {
}, 300, { leading: true })
render() {
const { statusIds, hasMore, isLoading, isMyAccount } = this.props
const {
statusIds,
hasMore,
isLoading,
isMyAccount,
} = this.props
if (!isMyAccount) {
return <ColumnIndicator type='missing' />
......
......@@ -48,10 +48,6 @@ class ListsDirectory extends ImmutablePureComponent {
const { intl, lists } = this.props
const { fetched } = this.state
if (lists.size === 0 && !fetched) {
return <ColumnIndicator type='loading' />
}
const emptyMessage = intl.formatMessage(messages.empty)
const listItems = lists.map(list => ({
......@@ -62,6 +58,7 @@ class ListsDirectory extends ImmutablePureComponent {
return (
<List
scrollKey='lists'
showLoading={lists.size === 0 && !fetched}
emptyMessage={emptyMessage}
items={listItems}
/>
......
......@@ -12,7 +12,6 @@ import {
forceDequeueNotifications,
} from '../actions/notifications'
import NotificationContainer from '../containers/notification_container'
import ColumnIndicator from '../components/column_indicator'
import ScrollableList from '../components/scrollable_list'
import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
import Block from '../components/block'
......@@ -122,22 +121,18 @@ class Notifications extends ImmutablePureComponent {