feat: Added Skeleton UI to chats

config/webpack/webpack.common.js

@@ -151,6 +151,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
  alias: {
  'react-native-config': 'react-web-config',
  'react-native$': 'react-native-web',
+ 'react-content-loader/native': 'react-content-loader',
  },
 
  // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`

package.json

@@ -77,6 +77,7 @@
  "pusher-js": "^7.0.6",
  "react": "^17.0.2",
  "react-collapse": "^5.1.0",
+ "react-content-loader": "^6.1.0",
  "react-dom": "^17.0.2",
  "react-native": "0.66.4",
  "react-native-collapsible": "^1.6.0",

src/CONST.js

@@ -476,9 +476,15 @@ const CONST = {
  NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 300,
  EMOJI_PICKER_ITEM_HEIGHT: 40,
  EMOJI_PICKER_HEADER_HEIGHT: 38,
-
  COMPOSER_MAX_HEIGHT: 125,
-
+ CHAT_SKELETON_VIEW: {
+ AVERAGE_ROW_HEIGHT: 80,
+ HEIGHT_FOR_ROW_COUNT: {
+ 1: 60,
+ 2: 80,
+ 3: 100,
+ },
+ },
  EMAIL: {
  CONCIERGE: 'concierge@expensify.com',
  HELP: 'help@expensify.com',

src/ONYXKEYS.js

@@ -103,7 +103,8 @@ export default {
  POLICY: 'policy_',
  REPORTS_WITH_DRAFT: 'reportWithDraft_',
  REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
- IS_LOADING_REPORT_ACTIONS: 'isLoadingReportActions_',
+ IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions_',
+ IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions_',
  POLICY_MEMBER_LIST: 'policyMemberList_',
  },
 

src/components/ReportActionsSkeletonView/SkeletonViewLines.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Rect, Circle} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import CONST from '../../CONST';
+
+const propTypes = {
+ /** Number of rows to show in Skeleton UI block */
+ numberOfRows: PropTypes.number.isRequired,
+};
+
+const SkeletonViewLines = props => (
+ <SkeletonViewContentLoader
+ height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+ >
+ <Circle cx="40" cy="26" r="20" />
+ <Rect x="67" y="11" width="20%" height="8" />
+ <Rect x="67" y="31" width="90%" height="8" />
+ {props.numberOfRows > 1 && <Rect x="67" y="51" width="50%" height="8" />}
+ {props.numberOfRows > 2 && <Rect x="67" y="71" width="50%" height="8" />}
+ </SkeletonViewContentLoader>
+);
+
+SkeletonViewLines.displayName = 'SkeletonViewLines';
+SkeletonViewLines.propTypes = propTypes;
+export default SkeletonViewLines;

src/components/ReportActionsSkeletonView/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SkeletonViewLines from './SkeletonViewLines';
+import CONST from '../../CONST';
+
+const propTypes = {
+ /** Height of the container component */
+ containerHeight: PropTypes.number.isRequired,
+};
+
+const ReportActionsSkeletonView = (props) => {
+ // Determines the number of content items based on container height
+ const possibleVisibleContentItems = Math.floor(props.containerHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
+ const skeletonViewLines = [];
+ for (let index = 0; index < possibleVisibleContentItems; index++) {
+ const iconIndex = (index + 1) % 4;
+ switch (iconIndex) {
+ case 2:
+ skeletonViewLines.push(<SkeletonViewLines numberOfRows={2} key={`skeletonViewLines${index}`} />);
+ break;
+ case 0:
+ skeletonViewLines.push(<SkeletonViewLines numberOfRows={3} key={`skeletonViewLines${index}`} />);
+ break;
+ default:
+ skeletonViewLines.push(<SkeletonViewLines numberOfRows={1} key={`skeletonViewLines${index}`} />);
+ }
+ }
+ return <>{skeletonViewLines}</>;
+};
+
+ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
+ReportActionsSkeletonView.propTypes = propTypes;
+export default ReportActionsSkeletonView;

src/libs/actions/Policy.js

@@ -525,7 +525,7 @@ function subscribeToPolicyEvents() {
  if (!_.isEmpty(policyExpenseChatIDs)) {
  Report.fetchChatReportsByIDs(policyExpenseChatIDs);
  _.each(policyExpenseChatIDs, (reportID) => {
- Report.fetchActions(reportID);
+ Report.fetchInitialActions(reportID);
  });
  }
 

src/libs/actions/Report.js

@@ -672,6 +672,17 @@ function fetchActions(reportID) {
  });
 }
 
+/**
+ * Get the initial actions of a report
+ *
+ * @param {Number} reportID
+ */
+function fetchInitialActions(reportID) {
+ Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, true);
+ fetchActions(reportID)
+ .finally(() => Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, false));
+}
+
 /**
  * Get all of our reports
  *
@@ -1073,17 +1084,17 @@ function readOldestAction(reportID, oldestActionSequenceNumber) {
  {
  optimisticData: [{
  onyxMethod: CONST.ONYX.METHOD.MERGE,
- key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+ key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
  value: true,
  }],
  successData: [{
  onyxMethod: CONST.ONYX.METHOD.MERGE,
- key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+ key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
  value: false,
  }],
  failureData: [{
  onyxMethod: CONST.ONYX.METHOD.MERGE,
- key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+ key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
  value: false,
  }],
  });
@@ -1574,7 +1585,6 @@ Onyx.connect({
 
 export {
  fetchAllReports,
- fetchActions,
  fetchOrCreateChatReport,
  fetchChatReportsByIDs,
  fetchIOUReportByID,
@@ -1598,6 +1608,7 @@ export {
  navigateToConciergeChat,
  handleInaccessibleReport,
  setReportWithDraft,
+ fetchInitialActions,
  createPolicyRoom,
  renameReport,
  setIsComposerFullSize,

src/pages/home/ReportScreen.js

@@ -19,7 +19,7 @@ import ReportActionCompose from './report/ReportActionCompose';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import SwipeableView from '../../components/SwipeableView';
 import CONST from '../../CONST';
-import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonView';
 import reportActionPropTypes from './report/reportActionPropTypes';
 import ArchivedReportFooter from '../../components/ArchivedReportFooter';
 import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
@@ -66,6 +66,9 @@ const propTypes = {
  /** Beta features list */
  betas: PropTypes.arrayOf(PropTypes.string),
 
+ /** Flag to check if report data is being loaded */
+ isLoadingInitialReportActions: PropTypes.bool,
+
  /** The policies which the user has access to */
  policies: PropTypes.objectOf(PropTypes.shape({
  /** The policy name */
@@ -89,6 +92,7 @@ const defaultProps = {
  },
  isComposerFullSize: false,
  betas: [],
+ isLoadingInitialReportActions: false,
 };
 
 /**
@@ -112,13 +116,12 @@ class ReportScreen extends React.Component {
  this.viewportOffsetTop = this.updateViewportOffsetTop.bind(this);
 
  this.state = {
- isLoading: true,
+ skeletonViewContainerHeight: 0,
  viewportOffsetTop: 0,
  };
  }
 
  componentDidMount() {
- this.prepareTransition();
  this.storeCurrentlyViewedReport();
  if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', this.viewportOffsetTop);
@@ -129,8 +132,6 @@ class ReportScreen extends React.Component {
  if (this.props.route.params.reportID === prevProps.route.params.reportID) {
  return;
  }
-
- this.prepareTransition();
  this.storeCurrentlyViewedReport();
  }
 
@@ -162,16 +163,7 @@ class ReportScreen extends React.Component {
  * @returns {Boolean}
  */
  shouldShowLoader() {
- return this.state.isLoading || !getReportID(this.props.route);
- }
-
- /**
- * Configures a small loading transition and proceeds with rendering available data
- */
- prepareTransition() {
- this.setState({isLoading: true});
- clearTimeout(this.loadingTimerId);
- this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 0);
+ return !getReportID(this.props.route) || (_.isEmpty(this.props.reportActions) && this.props.isLoadingInitialReportActions);
  }
 
  /**
@@ -212,7 +204,6 @@ class ReportScreen extends React.Component {
  if (isArchivedRoom) {
  reportClosedAction = lodashFindLast(this.props.reportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED);
  }
-
  return (
  <ScreenWrapper style={[styles.appContent, styles.flex1, {marginTop: this.state.viewportOffsetTop}]}>
  <KeyboardAvoidingView>
@@ -224,17 +215,23 @@ class ReportScreen extends React.Component {
  <View
  nativeID={CONST.REPORT.DROP_NATIVE_ID}
  style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
+ onLayout={event => this.setState({skeletonViewContainerHeight: event.nativeEvent.layout.height})}
  >
- {this.shouldShowLoader() && <FullScreenLoadingIndicator />}
- {!this.shouldShowLoader() && (
- <ReportActionsView
- reportID={reportID}
- reportActions={this.props.reportActions}
- report={this.props.report}
- session={this.props.session}
- isComposerFullSize={this.props.isComposerFullSize}
- />
- )}
+ {this.shouldShowLoader()
+ ? (
+ <ReportActionsSkeletonView
+ containerHeight={this.state.skeletonViewContainerHeight}
+ />
+ )
+ : (
+ <ReportActionsView
+ reportID={reportID}
+ reportActions={this.props.reportActions}
+ report={this.props.report}
+ session={this.props.session}
+ isComposerFullSize={this.props.isComposerFullSize}
+ />
+ )}
  {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
  <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
  {
@@ -288,6 +285,10 @@ export default withOnyx({
  betas: {
  key: ONYXKEYS.BETAS,
  },
+ isLoadingInitialReportActions: {
+ key: ({route}) => `${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${getReportID(route)}`,
+ initWithStoredValues: false,
+ },
  policies: {
  key: ONYXKEYS.COLLECTION.POLICY,
  },