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/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,35 @@
+import React from 'react';
+import {Dimensions} from 'react-native';
+import _ from 'underscore';
+import ContentLoadingOneLine from './ContentLoadingElements/ContentLoadingOneLine';
+import ContentLoadingTwoLines from './ContentLoadingElements/ContentLoadingTwoLines';
+import ContentLoadingThreeLines from './ContentLoadingElements/ContentLoadingThreeLines';
+
+
+const ChatList = () => {
+    const windowHeight = Dimensions.get('window').height;
+
+    const height = 80;
+    const numberOfRows = Math.floor(windowHeight / height);
+    const contentItems = Array.from({length: numberOfRows}, (v, i) => i);
+
+    return (
+        <>
+            {
+                _.map(contentItems, (item, index) => {
+                    const iconIndex = (index + 1) % 4;
+                    switch (iconIndex) {
+                        case 2:
+                            return <ContentLoadingTwoLines key={item} />;
+                        case 0:
+                            return <ContentLoadingThreeLines key={item} />;
+                        default:
+                            return <ContentLoadingOneLine key={item} />;
+                    }
+                })
+            }
+
+        </>
+    );
+};
+export default 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,8 @@ const propTypes = {
 
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
+
+    isLoadingReportData: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -72,6 +75,7 @@ const defaultProps = {
         hasOutstandingIOU: false,
     },
     betas: [],
+    isLoadingReportData: false,
 };
 
 /**
@@ -95,6 +99,7 @@ class ReportScreen extends React.Component {
 
         this.state = {
             isLoading: true,
+            isGhostScreenVisible: true,
         };
     }
 
@@ -116,6 +121,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 +194,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 +243,7 @@ export default withOnyx({
     betas: {
         key: ONYXKEYS.BETAS,
     },
+    isLoadingReportData: {
+        key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+    },
 })(ReportScreen);