diff --git a/app/javascript/gabsocial/components/list.js b/app/javascript/gabsocial/components/list.js index 69a903f4..c12be045 100644 --- a/app/javascript/gabsocial/components/list.js +++ b/app/javascript/gabsocial/components/list.js @@ -47,7 +47,7 @@ export default class List extends ImmutablePureComponent { emptyMessage={emptyMessage} showLoading={showLoading} placeholderComponent={ListItemPlaceholder} - placeholderCount={6} + placeholderCount={12} > { items.map((item, i) => ( diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js index b8af5ce6..ff204527 100644 --- a/app/javascript/gabsocial/components/panel/profile_info_panel.js +++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js @@ -38,7 +38,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { const Wrapper = noPanel ? Dummy : PanelLayout - if (!account) { + if (!account && !noPanel) { return ( diff --git a/app/javascript/gabsocial/components/panel/profile_stats_panel.js b/app/javascript/gabsocial/components/panel/profile_stats_panel.js index ef6e7fdd..8386cb8c 100644 --- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js +++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js @@ -38,7 +38,7 @@ class ProfileStatsPanel extends ImmutablePureComponent { return ( { - !account && + !account && !noPanel && } { diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js index 208a3feb..68d39a2e 100644 --- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js +++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js @@ -97,6 +97,7 @@ class WhoToFollowPanel extends ImmutablePureComponent { showDismiss key={accountId} id={accountId} + isSmall={isLoading ? true : undefined} dismissAction={dismissRelatedSuggestion} /> )) diff --git a/app/javascript/gabsocial/components/placeholder/account_placeholder.js b/app/javascript/gabsocial/components/placeholder/account_placeholder.js index 2a505552..cf8d789e 100644 --- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/account_placeholder.js @@ -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 ( +
+ + + + + +
+ ) + } + return (
- - - - + + + +
) diff --git a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js index 7e9014b0..f10cd55c 100644 --- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js @@ -1,6 +1,7 @@ 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 ( -
+ -
+ ) } diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js index a291f63c..a08babed 100644 --- a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js @@ -2,10 +2,6 @@ import PlaceholderLayout from './placeholder_layout' export default class MediaGalleryPanelPlaceholder extends PureComponent { - static propTypes = { - loaderProps: PropTypes.object, - } - render() { return (
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js new file mode 100644 index 00000000..fbfdf88b --- /dev/null +++ b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js @@ -0,0 +1,28 @@ +import PlaceholderLayout from './placeholder_layout' + +export default class MediaGalleryPlaceholder extends PureComponent { + + static propTypes = { + type: PropTypes.string, + } + + render() { + const { type } = this.props + + return ( +
+ + + + + + + + + + +
+ ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js index ca9ca94c..05dc38e3 100644 --- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js @@ -1,5 +1,10 @@ -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 ( -
-
- - - - - - - - - - - - - - - - - - -
-
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+ + + + + + + + + + + + + +
+
+
+
) } diff --git a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js new file mode 100644 index 00000000..117a70d8 --- /dev/null +++ b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js @@ -0,0 +1,32 @@ +import PlaceholderLayout from './placeholder_layout' + +export default class ProfileHeaderXSPlaceholder extends PureComponent { + + render() { + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js index 114c20ab..90c76deb 100644 --- a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js @@ -1,10 +1,6 @@ import PlaceholderLayout from './placeholder_layout' export default class ProfileStatsPanelPlaceholder extends PureComponent { - - static propTypes = { - loaderProps: PropTypes.object, - } render() { return ( diff --git a/app/javascript/gabsocial/components/placeholder/status_placeholder.js b/app/javascript/gabsocial/components/placeholder/status_placeholder.js index a153c2b2..f50e5c53 100644 --- a/app/javascript/gabsocial/components/placeholder/status_placeholder.js +++ b/app/javascript/gabsocial/components/placeholder/status_placeholder.js @@ -1,5 +1,10 @@ -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 ( - - - - - - - - - - + + +
+ + + + + + + + +
+
+ +
+ + + + + + + + +
+
+
) } diff --git a/app/javascript/gabsocial/components/profile_header.js b/app/javascript/gabsocial/components/profile_header.js index a51f1663..5e943714 100644 --- a/app/javascript/gabsocial/components/profile_header.js +++ b/app/javascript/gabsocial/components/profile_header.js @@ -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 ( +
+
+
+ +
+
+
+ ) + } + 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 {
- + { + account && + + } + { + !account && +
+ }
diff --git a/app/javascript/gabsocial/components/status_list.js b/app/javascript/gabsocial/components/status_list.js index 1f0e22bb..e83428b4 100644 --- a/app/javascript/gabsocial/components/status_list.js +++ b/app/javascript/gabsocial/components/status_list.js @@ -234,7 +234,6 @@ class StatusList extends ImmutablePureComponent { - ) } diff --git a/app/javascript/gabsocial/features/account_gallery.js b/app/javascript/gabsocial/features/account_gallery.js index 154fc8a6..84253457 100644 --- a/app/javascript/gabsocial/features/account_gallery.js +++ b/app/javascript/gabsocial/features/account_gallery.js @@ -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 && - +
+ +
} { diff --git a/app/javascript/gabsocial/features/account_timeline.js b/app/javascript/gabsocial/features/account_timeline.js index f25ad168..0a62eef2 100644 --- a/app/javascript/gabsocial/features/account_timeline.js +++ b/app/javascript/gabsocial/features/account_timeline.js @@ -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 ( diff --git a/app/javascript/gabsocial/features/followers.js b/app/javascript/gabsocial/features/followers.js index fc6efc3e..8d94e33f 100644 --- a/app/javascript/gabsocial/features/followers.js +++ b/app/javascript/gabsocial/features/followers.js @@ -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 (
@@ -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) => ( )) } diff --git a/app/javascript/gabsocial/features/following.js b/app/javascript/gabsocial/features/following.js index c17cacae..34e3e669 100644 --- a/app/javascript/gabsocial/features/following.js +++ b/app/javascript/gabsocial/features/following.js @@ -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 (
@@ -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) => ( )) } diff --git a/app/javascript/gabsocial/features/liked_statuses.js b/app/javascript/gabsocial/features/liked_statuses.js index 90f22619..e5ad8608 100644 --- a/app/javascript/gabsocial/features/liked_statuses.js +++ b/app/javascript/gabsocial/features/liked_statuses.js @@ -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 diff --git a/app/javascript/gabsocial/features/lists_directory.js b/app/javascript/gabsocial/features/lists_directory.js index 47c49a91..7885c062 100644 --- a/app/javascript/gabsocial/features/lists_directory.js +++ b/app/javascript/gabsocial/features/lists_directory.js @@ -48,10 +48,6 @@ class ListsDirectory extends ImmutablePureComponent { const { intl, lists } = this.props const { fetched } = this.state - if (lists.size === 0 && !fetched) { - return - } - const emptyMessage = intl.formatMessage(messages.empty) const listItems = lists.map(list => ({ @@ -62,6 +58,7 @@ class ListsDirectory extends ImmutablePureComponent { return ( diff --git a/app/javascript/gabsocial/features/notifications.js b/app/javascript/gabsocial/features/notifications.js index cc9e4cc7..5a69937b 100644 --- a/app/javascript/gabsocial/features/notifications.js +++ b/app/javascript/gabsocial/features/notifications.js @@ -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 { } = this.props const { changedTabs } = this.state - if (isLoading && changedTabs) { - return - } - let scrollableContent = null - if (isLoading && this.scrollableContent) { + if (isLoading && this.scrollableContent && !changedTabs) { scrollableContent = this.scrollableContent - } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter !== 'follow') { + } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter !== 'follow' && !changedTabs) { scrollableContent = sortedNotifications.map((item, index) => ( )) - } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter === 'follow') { + } else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter === 'follow' && !changedTabs) { const followNotifications = [] sortedNotifications.forEach((block) => { if (block) { @@ -175,7 +170,7 @@ class Notifications extends ImmutablePureComponent { } onLoadMore={this.handleLoadOlder} diff --git a/app/javascript/gabsocial/layouts/profile_layout.js b/app/javascript/gabsocial/layouts/profile_layout.js index 96cc8ba4..a16e5539 100644 --- a/app/javascript/gabsocial/layouts/profile_layout.js +++ b/app/javascript/gabsocial/layouts/profile_layout.js @@ -63,7 +63,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
- + diff --git a/app/javascript/gabsocial/pages/profile_page.js b/app/javascript/gabsocial/pages/profile_page.js index da430a33..82fc4361 100644 --- a/app/javascript/gabsocial/pages/profile_page.js +++ b/app/javascript/gabsocial/pages/profile_page.js @@ -72,10 +72,7 @@ class ProfilePage extends ImmutablePureComponent { > { - !account && - } - { - !!account && !unavailable && + !unavailable && React.cloneElement(children, { account, })