feat: Added Skeleton UI to chats

package.json

@@ -74,6 +74,7 @@
     "pusher-js": "^7.0.0",
     "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

@@ -376,6 +376,7 @@ const CONST = {
     EMOJI_PICKER_HEADER_HEIGHT: 38,
 
     COMPOSER_MAX_HEIGHT: 116,
+    CHAT_GHOST_ROW_HEIGHT: 80,
 
     EMAIL: {
         CONCIERGE: 'concierge@expensify.com',

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const ContentLoadingOneLine = () => (
+    <ContentLoader
+        height={60}
+        width="100%"
+        title=""
+    >
+        <circle cx="50" cy="26" r="20" />
+        <rect x="90" y="11" width="20%" height="8" />
+        <rect x="90" y="31" width="90%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingOneLine.displayName = 'ContentLoadingOneLine';
+export default ContentLoadingOneLine;

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader, {Circle, Rect} from 'react-content-loader/native';
+
+const ContentLoadingOneLine = () => (
+    <ContentLoader
+        height={60}
+        width="100%"
+        title=""
+    >
+        <Circle cx="50" cy="26" r="20" />
+        <Rect x="90" y="11" width="20%" height="8" />
+        <Rect x="90" y="31" width="75%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingOneLine.displayName = 'ContentLoadingOneLine';
+export default ContentLoadingOneLine;

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const ContentLoadingThreeLines = () => (
+    <ContentLoader
+        height={100}
+        width="100%"
+        title=""
+    >
+        <circle cx="50" cy="26" r="20" />
+        <rect x="90" y="11" width="20%" height="8" />
+        <rect x="90" y="31" width="90%" height="8" />
+        <rect x="90" y="51" width="90%" height="8" />
+        <rect x="90" y="71" width="50%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines';
+export default ContentLoadingThreeLines;

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader, {Circle, Rect} from 'react-content-loader/native';
+
+const ContentLoadingThreeLines = () => (
+    <ContentLoader
+        height={100}
+        width="100%"
+        title=""
+    >
+        <Circle cx="50" cy="26" r="20" />
+        <Rect x="90" y="11" width="20%" height="8" />
+        <Rect x="90" y="31" width="75%" height="8" />
+        <Rect x="90" y="51" width="75%" height="8" />
+        <Rect x="90" y="71" width="50%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines';
+export default ContentLoadingThreeLines;

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const ContentLoadingTwoLines = () => (
+    <ContentLoader
+        height={80}
+        width="100%"
+        title=""
+    >
+        <circle cx="50" cy="26" r="20" />
+        <rect x="90" y="11" width="20%" height="8" />
+        <rect x="90" y="31" width="90%" height="8" />
+        <rect x="90" y="51" width="50%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines';
+export default ContentLoadingTwoLines;

src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader, {Rect, Circle} from 'react-content-loader/native';
+
+const ContentLoadingTwoLines = () => (
+    <ContentLoader
+        height={80}
+        width="100%"
+        title=""
+    >
+        <Circle cx="50" cy="26" r="20" />
+        <Rect x="90" y="11" width="20%" height="8" />
+        <Rect x="90" y="31" width="75%" height="8" />
+        <Rect x="90" y="51" width="50%" height="8" />
+    </ContentLoader>
+);
+
+ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines';
+export default ContentLoadingTwoLines;

src/components/ChatGhostUI/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import _ from 'underscore';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import ContentLoadingOneLine from './ContentLoadingElements/ContentLoadingOneLine';
+import ContentLoadingTwoLines from './ContentLoadingElements/ContentLoadingTwoLines';
+import ContentLoadingThreeLines from './ContentLoadingElements/ContentLoadingThreeLines';
+import CONST from '../../CONST';
+
+const propTypes = {
+    ...windowDimensionsPropTypes,
+};
+
+const ChatList = (props) => {
+    const windowHeight = props.windowHeight;
+
+    const height = CONST.CHAT_GHOST_ROW_HEIGHT;
+    const numberOfRows = Math.floor(windowHeight / height);
+    const contentItems = new Array(numberOfRows);
+
+    return (
+        <>
+            {
+                _.map(contentItems, (_item, index) => {
+                    const iconIndex = (index + 1) % 4;
+                    switch (iconIndex) {
+                        case 2:
+                            return <ContentLoadingTwoLines key={`ghostLoaderLines${index}`} />;
+                        case 0:
+                            return <ContentLoadingThreeLines key={`ghostLoaderLines${index}`} />;
+                        default:
+                            return <ContentLoadingOneLine key={`ghostLoaderLines${index}`} />;
+                    }
+                })
+            }
+
+        </>
+    );
+};
+
+ChatList.displayName = 'ChatList';
+ChatList.propTypes = propTypes;
+export default withWindowDimensions(ChatList);

src/pages/home/ReportScreen.js

@@ -18,6 +18,7 @@ import KeyboardSpacer from '../../components/KeyboardSpacer';
 import SwipeableView from '../../components/SwipeableView';
 import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+import ChatGhostUI from '../../components/ChatGhostUI';
 import reportActionPropTypes from './report/reportActionPropTypes';
 
 const propTypes = {
@@ -58,6 +59,9 @@ const propTypes = {
 
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
+
+    /** Flag to check if report data is being loaded */
+    isLoadingReportData: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -72,6 +76,7 @@ const defaultProps = {
         hasOutstandingIOU: false,
     },
     betas: [],
+    isLoadingReportData: false,
 };
 
 /**
@@ -95,6 +100,7 @@ class ReportScreen extends React.Component {
 
         this.state = {
             isLoading: true,
+            isGhostScreenVisible: true,
         };
     }
 
@@ -116,6 +122,21 @@ class ReportScreen extends React.Component {
         clearTimeout(this.loadingTimerId);
     }
 
+    /**
+     * When the report data is loaded, hide the ghost screen
+     *
+     * @static
+     * @param {Object} props
+     * @param {Object} state
+     * @return {Object|null}
+     */
+    static getDerivedStateFromProps(props, state) {
+        if (state.isGhostScreenVisible && props.isLoadingReportData === false) {
+            return {isGhostScreenVisible: false};
+        }
+        return null;
+    }
+
     /**
      * @param {String} text
      */
@@ -174,8 +195,11 @@ class ReportScreen extends React.Component {
                     nativeID={CONST.REPORT.DROP_NATIVE_ID}
                     style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
                 >
-                    <FullScreenLoadingIndicator visible={this.shouldShowLoader()} />
-                    {!this.shouldShowLoader() && (
+                    {
+                      this.state.isGhostScreenVisible && <ChatGhostUI />
+                    }
+                    <FullScreenLoadingIndicator visible={!this.state.isGhostScreenVisible && this.shouldShowLoader()} />
+                    {!this.state.isGhostScreenVisible && !this.shouldShowLoader() && (
                         <ReportActionsView
                             reportID={reportID}
                             reportActions={this.props.reportActions}
@@ -220,4 +244,7 @@ export default withOnyx({
     betas: {
         key: ONYXKEYS.BETAS,
     },
+    isLoadingReportData: {
+        key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+    },
 })(ReportScreen);