Added placeholder loaders to multiple components

• Added: - placeholder loaders to multiple components - status, panels, comment, lists, group items, notifications
2020-07-28 15:11:51 -05:00 · 2020-07-28 15:11:51 -05:00 · bc6cf0e624
commit bc6cf0e624
parent a38d9f6133
12 changed files with 141 additions and 68 deletions
--- a/app/javascript/gabsocial/components/list.js
+++ b/app/javascript/gabsocial/components/list.js
@ -4,6 +4,7 @@ import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
 import Dummy from './dummy'
+import ListItemPlaceholder from './placeholder/list_item_placeholder'

 export default class List extends ImmutablePureComponent {

@ -45,6 +46,8 @@ export default class List extends ImmutablePureComponent {
          scrollKey={scrollKey}
          emptyMessage={emptyMessage}
          showLoading={showLoading}
+          placeholderComponent={ListItemPlaceholder}
+          placeholderCount={6}
        >
          {
            items.map((item, i) => (
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@ -5,6 +5,7 @@ import { fetchGroups } from '../../actions/groups'
 import PanelLayout from './panel_layout'
 import GroupListItem from '../group_list_item'
 import ScrollableList from '../scrollable_list'
+import GroupListItemPlaceholder from '../placeholder/group_list_item_placeholder'

 const messages = defineMessages({
  title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
@ -86,6 +87,8 @@ class GroupSidebarPanel extends ImmutablePureComponent {
        <ScrollableList
          scrollKey='groups_panel'
          showLoading={!fetched}
+          placeholderComponent={GroupListItemPlaceholder}
+          placeholderCount={6}
        >
          {
            groupIds && groupIds.slice(0, maxCount).map((groupId, i) => (
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
@ -5,6 +5,7 @@ import { expandAccountMediaTimeline } from '../../actions/timelines'
 import { getAccountGallery } from '../../selectors'
 import PanelLayout from './panel_layout'
 import MediaItem from '../media_item'
+import MediaGalleryPanelPlaceholder from '../placeholder/media_gallery_panel_placeholder'

 const messages = defineMessages({
  title: { id: 'media_gallery_panel.title', defaultMessage: 'Media' },
@ -16,6 +17,7 @@ const mapStateToProps = (state, { account }) => {

  return {
    accountId,
+    isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading'], true), 
    attachments: getAccountGallery(state, accountId),
  }
 }
@ -29,6 +31,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
    dispatch: PropTypes.func.isRequired,
    accountId: PropTypes.string,
    account: ImmutablePropTypes.map,
+    isLoading: PropTypes.bool,
    attachments: ImmutablePropTypes.list.isRequired,
    intl: PropTypes.object.isRequired,
  }
@ -49,35 +52,40 @@ class MediaGalleryPanel extends ImmutablePureComponent {

  render() {
    const {
-      intl,
      account,
-      attachments
+      attachments,
+      intl,
+      isLoading,
    } = this.props

-    if (!account || !attachments) return null
+    if (!attachments) return null

    return (
      <PanelLayout
        noPadding
        title={intl.formatMessage(messages.title)}
-        headerButtonTitle={intl.formatMessage(messages.show_all)}
-        headerButtonTo={`/${account.get('acct')}/media`}
+        headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
+        headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
      > 
-        {
-          attachments.size > 0 &&
-          <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
-            {
-              attachments.slice(0, 16).map((attachment, i) => (
-                <MediaItem
-                  isSmall
-                  key={attachment.get('id')}
-                  attachment={attachment}
-                  account={account}
-                />
-              ))
-            }
-          </div>
-        }
+        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+          {
+            !!account && attachments.size > 0 &&
+            attachments.slice(0, 16).map((attachment, i) => (
+              <MediaItem
+                isSmall
+                key={attachment.get('id')}
+                attachment={attachment}
+                account={account}
+              />
+            ))
+          }
+          {
+            !account || (attachments.size === 0 && isLoading) &&
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+              <MediaGalleryPanelPlaceholder />
+            </div>
+          }
+        </div>
      </PanelLayout>
    )
  }
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@ -9,6 +9,7 @@ import Divider from '../divider'
 import Icon from '../icon'
 import Text from '../text'
 import Dummy from '../dummy'
+import ProfileInfoPanelPlaceholder from '../placeholder/profile_info_panel_placeholder'

 const messages = defineMessages({
  title: { id: 'about', defaultMessage: 'About' },
@ -35,7 +36,15 @@ class ProfileInfoPanel extends ImmutablePureComponent {
      noPanel
    } = this.props

-    if (!account) return null
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
+    if (!account) {
+      return (
+        <Wrapper title={intl.formatMessage(messages.title)}>
+          <ProfileInfoPanelPlaceholder />
+        </Wrapper>
+      )
+    }

    const fields = account.get('fields')
    const content = { __html: account.get('note_emojified') }
@ -46,8 +55,6 @@ class ProfileInfoPanel extends ImmutablePureComponent {
    const isInvestor = account.get('is_investor')
    const hasBadges = isPro || isDonor || isInvestor

-    const Wrapper = noPanel ? Dummy : PanelLayout
-
    return (
      <Wrapper title={intl.formatMessage(messages.title)}>
        <div className={[_s.default].join(' ')}>
--- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
@ -6,6 +6,7 @@ import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import UserStat from '../user_stat'
 import Dummy from '../dummy'
+import ProfileStatsPanelPlaceholder from '../placeholder/profile_stats_panel_placeholder'
 import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'

 const messages = defineMessages({
@ -32,12 +33,14 @@ class ProfileStatsPanel extends ImmutablePureComponent {
      noPanel
    } = this.props

-    if (!account) return null
-
    const Wrapper = noPanel ? Dummy : PanelLayout

    return (
      <Wrapper>
+        {
+          !account &&
+          <ProfileStatsPanelPlaceholder />
+        }
        {
          !!account &&
          <ResponsiveClassesComponent
--- a/app/javascript/gabsocial/components/panel/trends_panel.js
+++ b/app/javascript/gabsocial/components/panel/trends_panel.js
@ -5,6 +5,7 @@ import { fetchGabTrends } from '../../actions/gab_trends'
 import PanelLayout from './panel_layout'
 import ScrollableList from '../scrollable_list'
 import TrendsItem from '../trends_item'
+import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'

 const messages = defineMessages({
  title: { id: 'trends.title', defaultMessage: 'Trending right now' },
@ -59,7 +60,9 @@ class TrendsPanel extends ImmutablePureComponent {
        title={intl.formatMessage(messages.title)}
      >
        <ScrollableList
-          isLoading={isLoading}
+          showLoading={isLoading}
+          placeholderComponent={TrendsItemPlaceholder}
+          placeholderCount={8}
          scrollKey='trending-items'
        >
          {
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@ -5,7 +5,8 @@ import {
 } from '../../actions/suggestions'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import Account from '../../components/account'
+import Account from '../account'
+import AccountPlaceholder from '../placeholder/account_placeholder'
 import PanelLayout from './panel_layout'

 const messages = defineMessages({
@ -16,6 +17,7 @@ const messages = defineMessages({

 const mapStateToProps = (state) => ({
  suggestions: state.getIn(['suggestions', 'related', 'items']),
+  isLoading: state.getIn(['suggestions', 'related', 'isLoading']),
 })

 const mapDispatchToProps = (dispatch) => ({
@ -33,6 +35,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
    fetchRelatedSuggestions: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
    suggestions: ImmutablePropTypes.list.isRequired,
+    isLoading: PropTypes.bool.isRequired,
    isLazy: PropTypes.bool,
  }

@ -69,12 +72,16 @@ class WhoToFollowPanel extends ImmutablePureComponent {
  render() {
    const {
      intl,
+      isLoading,
      suggestions,
      dismissRelatedSuggestion,
    } = this.props

    if (suggestions.isEmpty()) return null

+    const Child = isLoading ? AccountPlaceholder : Account
+    const arr = isLoading ? Array.apply(null, { length: 6 }) : suggestions
+
    return (
      <PanelLayout
        noPadding
@ -84,8 +91,8 @@ class WhoToFollowPanel extends ImmutablePureComponent {
      >
        <div className={_s.default}>
          {
-            suggestions.map(accountId => (
-              <Account
+            arr.map((accountId) => (
+              <Child
                compact
                showDismiss
                key={accountId}
--- a/app/javascript/gabsocial/components/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list.js
@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import throttle from 'lodash.throttle'
 import { List as ImmutableList } from 'immutable'
 import IntersectionObserverArticle from './intersection_observer_article'
@ -28,6 +29,8 @@ export default class ScrollableList extends PureComponent {
    children: PropTypes.node,
    onScrollToTop: PropTypes.func,
    onScroll: PropTypes.func,
+    placeholderComponent: PropTypes.node,
+    placeholderCount: PropTypes.node,
  }

  state = {
@ -220,13 +223,34 @@ export default class ScrollableList extends PureComponent {
      hasMore,
      emptyMessage,
      onLoadMore,
+      placeholderComponent: Placeholder,
+      placeholderCount,
    } = this.props
    const childrenCount = React.Children.count(children);

    const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null

    if (showLoading) {
-      return <ColumnIndicator type='loading' />
+      if (Placeholder) {
+        return (
+          <Fragment>
+            {
+              Array.apply(null, {
+                length: placeholderCount
+              }).map((_, i) => (
+                <Placeholder
+                  key={`${scrollKey}-placeholder-${i}`}
+                  isLast={i === placeholderCount - 1}
+                />
+              ))
+            }
+          </Fragment>
+        )
+      }
+
+      return (
+        <ColumnIndicator type='loading' />
+      )
    } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
      return (
        <div onMouseMove={this.handleMouseMove}>
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@ -12,6 +12,7 @@ import { me, displayMedia } from '../initial_state'
 import scheduleIdleTask from '../utils/schedule_idle_task'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import CommentPlaceholder from './placeholder/comment_placeholder'
 import StatusContent from './status_content'
 import StatusPrepend from './status_prepend'
 import StatusActionBar from './status_action_bar'
@ -413,6 +414,7 @@ class Status extends ImmutablePureComponent {

    if (isComment && !ancestorStatus && !isChild) {
      // Wait to load...
+      // return <StatusPlaceholder />
      if (contextType === 'feature') {
        return <ColumnIndicator type='loading' />
      }
@ -585,46 +587,49 @@ class Status extends ImmutablePureComponent {
                      <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
                    </ResponsiveClassesComponent>
                  }
-
+                  
                  {
-                    status.get('replies_count') > 0 && !commentsLimited && !isNotification && descendantsIds && descendantsIds.size === 0 &&
+                    status.get('replies_count') > 0 && !isChild && !isNotification && !commentsLimited &&
                    <Fragment>
                      <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
-                      <ColumnIndicator type='loading' />
-                    </Fragment>
-                  }

-                  {
-                    descendantsIds && !isChild && !isNotification && descendantsIds.size > 0 && !commentsLimited &&
-                    <Fragment>
-                      <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+                      <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
+                        <Text color='secondary' size='small'>
+                          {intl.formatMessage(messages.sortBy)}
+                        </Text>
+                        <Button
+                          isText
+                          backgroundColor='none'
+                          color='secondary'
+                          className={_s.ml5}
+                          buttonRef={this.setCommentSortButtonRef}
+                          onClick={this.handleOnCommentSortOpen}
+                          disabled={descendantsIds.size === 0}
+                        >
+                          <Text color='inherit' weight='medium' size='small'>
+                            {sortByTitle}
+                          </Text>
+                        </Button>
+                      </div>

                      {
-                        !commentsLimited && descendantsIds.size > 1 &&
-                        <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
-                          <Text color='secondary' size='small'>
-                            {intl.formatMessage(messages.sortBy)}
-                          </Text>
-                          <Button
-                            isText
-                            backgroundColor='none'
-                            color='secondary'
-                            className={_s.ml5}
-                            buttonRef={this.setCommentSortButtonRef}
-                            onClick={this.handleOnCommentSortOpen}
-                          >
-                            <Text color='inherit' weight='medium' size='small'>
-                              {sortByTitle}
-                            </Text>
-                          </Button>
-                        </div>
+                        descendantsIds.size === 0 &&
+                        <Fragment>
+                          <CommentPlaceholder />
+                          <CommentPlaceholder />
+                          <CommentPlaceholder />
+                        </Fragment>
+                      }
+                      
+                      {
+                        descendantsIds.size > 0 &&
+                        <CommentList
+                          ancestorAccountId={status.getIn(['account', 'id'])}
+                          commentsLimited={commentsLimited}
+                          descendants={descendantsIds}
+                          onViewComments={this.handleClick}
+                        />
                      }
-                      <CommentList
-                        ancestorAccountId={status.getIn(['account', 'id'])}
-                        commentsLimited={commentsLimited}
-                        descendants={descendantsIds}
-                        onViewComments={this.handleClick}
-                      />
                    </Fragment>
                  }
                </div>
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@ -9,9 +9,9 @@ import { dequeueTimeline } from '../actions/timelines'
 import { scrollTopTimeline } from '../actions/timelines'
 import { fetchStatus, fetchContext } from '../actions/statuses'
 import StatusContainer from '../containers/status_container'
+import StatusPlaceholder from './placeholder/status_placeholder'
 import ScrollableList from './scrollable_list'
 import TimelineQueueButtonHeader from './timeline_queue_button_header'
-import ColumnIndicator from './column_indicator'

 const makeGetStatusIds = () => createSelector([
  (state, { type, id }) => state.getIn(['settings', type], ImmutableMap()),
@ -228,8 +228,15 @@ class StatusList extends ImmutablePureComponent {
    } = this.props
    const { fetchedContext, refreshing } = this.state

-    if (isPartial) {
-      return <ColumnIndicator type='loading' />
+    if (isPartial || isLoading && statusIds.size === 0) {
+      return (
+        <Fragment>
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+          <StatusPlaceholder />
+        </Fragment>
+      )
    }

    // : hack :
--- a/app/javascript/gabsocial/features/notifications.js
+++ b/app/javascript/gabsocial/features/notifications.js
@ -17,6 +17,7 @@ import ScrollableList from '../components/scrollable_list'
 import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
 import Block from '../components/block'
 import Account from '../components/account'
+import NotificationPlaceholder from '../components/placeholder/notification_placeholder'

 const mapStateToProps = (state) => ({
  notifications: state.getIn(['notifications', 'items']),
@ -180,6 +181,8 @@ class Notifications extends ImmutablePureComponent {
            onLoadMore={this.handleLoadOlder}
            onScrollToTop={this.handleScrollToTop}
            onScroll={this.handleScroll}
+            placeholderComponent={NotificationPlaceholder}
+            placeholderCount={3}
          >
            {scrollableContent}
          </ScrollableList>
--- a/app/javascript/gabsocial/features/status.js
+++ b/app/javascript/gabsocial/features/status.js
@ -6,7 +6,7 @@ import {
  fetchContext,
 } from '../actions/statuses'
 import StatusContainer from '../containers/status_container'
-import ColumnIndicator from '../components/column_indicator'
+import StatusPlaceholder from '../components/placeholder/status_placeholder'

 const mapStateToProps = (state, props) => {
  const statusId = props.id || props.params.statusId
@ -73,7 +73,7 @@ class Status extends ImmutablePureComponent {
    const { status } = this.props
  
    if (!status) {
-      return <ColumnIndicator type='loading' />
+      return <StatusPlaceholder />
    }

    return (