Fullscreen loader logging

src/CONST.js

@@ -305,6 +305,7 @@ const CONST = {
         COLD: 'cold',
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,
         TOOLTIP_SENSE: 1000,
+        SPINNER_TIMEOUT: 15 * 1000,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/components/FullscreenLoadingIndicator.js

@@ -5,38 +5,68 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import stylePropTypes from '../styles/stylePropTypes';
+import Log from '../libs/Log';
+import CONST from '../CONST';
 
 const propTypes = {
-    /** Controls whether the loader is mounted and displayed */
-    visible: PropTypes.bool,
+    /**
+     * Context info printed in timing log.
+     * Providing this prop would capture logs for mounting/unmounting and staying visible for too long
+     */
+    logDetail: PropTypes.shape({
+        /** Name is used to distinct the loader in captured logs. */
+        name: PropTypes.string.isRequired,
+    }),
 
     /** Additional style props */
     style: stylePropTypes,
 };
 
 const defaultProps = {
-    visible: true,
     style: [],
+    logDetail: null,
 };
 
-/**
- * Loading indication component intended to cover the whole page, while the page prepares for initial render
- *
- * @param {Object} props
- * @returns {JSX.Element}
- */
-const FullScreenLoadingIndicator = (props) => {
-    if (!props.visible) {
-        return null;
+class FullScreenLoadingIndicator extends React.Component {
+    componentDidMount() {
+        if (!this.props.logDetail) {
+            return;
+        }
+
+        if (!this.props.logDetail.name) {
+            throw new Error('A name should be set to distinct logged messages. Please check the `logDetails` prop.');
+        }
+
+        Log.info('[LoadingIndicator] Became visible', false, this.props.logDetail);
+
+        this.timeoutID = setTimeout(
+            () => Log.alert(
+                `${CONST.ERROR.ENSURE_BUGBOT} [LoadingIndicator] Visible after timeout`,
+                {timeout: CONST.TIMING.SPINNER_TIMEOUT, ...this.props.logDetail},
+                false,
+            ),
+            CONST.TIMING.SPINNER_TIMEOUT,
+        );
     }
 
-    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
-    return (
-        <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
-            <ActivityIndicator color={themeColors.spinner} size="large" />
-        </View>
-    );
-};
+    componentWillUnmount() {
+        if (!this.timeoutID) {
+            return;
+        }
+
+        clearTimeout(this.timeoutID);
+        Log.info('[LoadingIndicator] Disappeared', false, this.props.logDetail);
+    }
+
+    render() {
+        const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
+        return (
+            <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
+                <ActivityIndicator color={themeColors.spinner} size="large" />
+            </View>
+        );
+    }
+}
 
 FullScreenLoadingIndicator.propTypes = propTypes;
 FullScreenLoadingIndicator.defaultProps = defaultProps;

src/components/WalletStatementModal/index.js

@@ -41,9 +41,7 @@ class WalletStatementModal extends React.Component {
         const authToken = lodashGet(this.props, 'session.authToken', null);
         return (
             <>
-                <FullScreenLoadingIndicator
-                    visible={this.state.isLoading}
-                />
+                {this.state.isLoading && <FullScreenLoadingIndicator />}
                 <View style={[styles.flex1]}>
                     <iframe
                         src={`${this.props.statementPageURL}&authToken=${authToken}`}

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -49,7 +49,7 @@ const MainDrawerNavigator = (props) => {
 
     // Wait until reports are fetched and there is a reportID in initialParams
     if (!initialParams.reportID) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator logDetail={{name: 'Main Drawer Loader', initialParams}} />;
     }
 
     // After the app initializes and reports are available the home navigation is mounted

src/libs/Navigation/NavigationRoot.js

@@ -57,7 +57,12 @@ class NavigationRoot extends Component {
     render() {
         return (
             <NavigationContainer
-                fallback={<FullScreenLoadingIndicator style={styles.navigatorFullScreenLoading} />}
+                fallback={(
+                    <FullScreenLoadingIndicator
+                        logDetail={{name: 'Navigation Fallback Loader', authenticated: this.props.authenticated}}
+                        style={styles.navigatorFullScreenLoading}
+                    />
+                )}
                 onStateChange={this.parseAndStoreRoute}
                 onReady={this.props.onReady}
                 theme={navigationTheme}

src/pages/NewChatPage.js

@@ -235,7 +235,7 @@ class NewChatPage extends Component {
                             onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
                         <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
+                            {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
                             {didScreenTransitionEnd && (
                                 <>
                                     <OptionsSelector

src/pages/SearchPage.js

@@ -173,7 +173,7 @@ class SearchPage extends Component {
                             onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
                         <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
+                            {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
                             {didScreenTransitionEnd && (
                                 <OptionsSelector
                                     sections={sections}

src/pages/home/ReportScreen.js

@@ -183,7 +183,7 @@ class ReportScreen extends React.Component {
                     nativeID={CONST.REPORT.DROP_NATIVE_ID}
                     style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
                 >
-                    <FullScreenLoadingIndicator visible={this.shouldShowLoader()} />
+                    {this.shouldShowLoader() && <FullScreenLoadingIndicator />}
                     {!this.shouldShowLoader() && (
                         <ReportActionsView
                             reportID={reportID}

src/pages/iou/IOUModal.js

@@ -387,9 +387,7 @@ class IOUModal extends Component {
                             </View>
                         </View>
                         <View style={[styles.pRelative, styles.flex1]}>
-                            <FullScreenLoadingIndicator
-                                visible={!didScreenTransitionEnd}
-                            />
+                            {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
                             {didScreenTransitionEnd && (
                                 <>
                                     {currentStep === Steps.IOUAmount && (

src/pages/workspace/WorkspaceInvitePage.js

@@ -262,7 +262,7 @@ class WorkspaceInvitePage extends React.Component {
                             onBackButtonPress={() => Navigation.goBack()}
                         />
                         <View style={[styles.flex1]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
+                            {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
                             {didScreenTransitionEnd && (
                                 <OptionsSelector
                                     autoFocus={false}