From ed18c4952c10ea7c8b188bbd78cbb244fa2b9dd7 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Tue, 29 Mar 2022 21:22:24 +0300 Subject: [PATCH 01/36] Add logging to fullscreen loaders to investigate infinite loading screens --- src/components/FullscreenLoadingIndicator.js | 51 +++++++++++++++----- src/components/WalletStatementModal/index.js | 4 +- src/pages/NewChatPage.js | 2 +- src/pages/SearchPage.js | 2 +- src/pages/home/ReportScreen.js | 2 +- src/pages/iou/IOUModal.js | 4 +- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 7 files changed, 44 insertions(+), 23 deletions(-) diff --git a/src/components/FullscreenLoadingIndicator.js b/src/components/FullscreenLoadingIndicator.js index 41a2ef2f8436..c1e9eeff9cfc 100644 --- a/src/components/FullscreenLoadingIndicator.js +++ b/src/components/FullscreenLoadingIndicator.js @@ -5,17 +5,22 @@ 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'; const propTypes = { - /** Controls whether the loader is mounted and displayed */ - visible: PropTypes.bool, + /** Name used in the logs if the loader is displayed for too long time */ + name: PropTypes.string, + + /** Optional duration (ms) after which a message would be logged if the loader is still covering the screen */ + timeout: PropTypes.number, /** Additional style props */ style: stylePropTypes, }; const defaultProps = { - visible: true, + timeout: 0, + name: '', style: [], }; @@ -25,18 +30,38 @@ const defaultProps = { * @param {Object} props * @returns {JSX.Element} */ -const FullScreenLoadingIndicator = (props) => { - if (!props.visible) { - return null; +class FullScreenLoadingIndicator extends React.Component { + componentDidMount() { + if (!this.props.name || !this.props.timeout) { + return; + } + + Log.info(`[LoadingIndicator] "${this.props.name}" became visible`); + + this.timeoutId = setTimeout( + () => Log.alert(`[LoadingIndicator] "${this.props.name}" is still visible after ${this.props.timeout} ms`), + this.props.timeout, + ); } - const additionalStyles = _.isArray(props.style) ? props.style : [props.style]; - return ( - - - - ); -}; + componentWillUnmount() { + if (!this.timeoutId) { + return; + } + + clearTimeout(this.timeoutId); + Log.info(`[LoadingIndicator] "${this.props.name}" disappeared`); + } + + render() { + const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style]; + return ( + + + + ); + } +} FullScreenLoadingIndicator.propTypes = propTypes; FullScreenLoadingIndicator.defaultProps = defaultProps; diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 655ef2421e29..60d57fc5c14b 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -41,9 +41,7 @@ class WalletStatementModal extends React.Component { const authToken = lodashGet(this.props, 'session.authToken', null); return ( <> - + {this.state.isLoading && }