@@ -5,38 +5,68 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native';
5
5
import styles from '../styles/styles' ;
6
6
import themeColors from '../styles/themes/default' ;
7
7
import stylePropTypes from '../styles/stylePropTypes' ;
8
+ import Log from '../libs/Log' ;
9
+ import CONST from '../CONST' ;
8
10
9
11
const propTypes = {
10
- /** Controls whether the loader is mounted and displayed */
11
- visible : PropTypes . bool ,
12
+ /**
13
+ * Context info printed in timing log.
14
+ * Providing this prop would capture logs for mounting/unmounting and staying visible for too long
15
+ */
16
+ logDetail : PropTypes . shape ( {
17
+ /** Name is used to distinct the loader in captured logs. */
18
+ name : PropTypes . string . isRequired ,
19
+ } ) ,
12
20
13
21
/** Additional style props */
14
22
style : stylePropTypes ,
15
23
} ;
16
24
17
25
const defaultProps = {
18
- visible : true ,
19
26
style : [ ] ,
27
+ logDetail : null ,
20
28
} ;
21
29
22
- /**
23
- * Loading indication component intended to cover the whole page, while the page prepares for initial render
24
- *
25
- * @param {Object } props
26
- * @returns {JSX.Element }
27
- */
28
- const FullScreenLoadingIndicator = ( props ) => {
29
- if ( ! props . visible ) {
30
- return null ;
30
+ class FullScreenLoadingIndicator extends React . Component {
31
+ componentDidMount ( ) {
32
+ if ( ! this . props . logDetail ) {
33
+ return ;
34
+ }
35
+
36
+ if ( ! this . props . logDetail . name ) {
37
+ throw new Error ( 'A name should be set to distinct logged messages. Please check the `logDetails` prop.' ) ;
38
+ }
39
+
40
+ Log . info ( '[LoadingIndicator] Became visible' , false , this . props . logDetail ) ;
41
+
42
+ this . timeoutID = setTimeout (
43
+ ( ) => Log . alert (
44
+ `${ CONST . ERROR . ENSURE_BUGBOT } [LoadingIndicator] Visible after timeout` ,
45
+ { timeout : CONST . TIMING . SPINNER_TIMEOUT , ...this . props . logDetail } ,
46
+ false ,
47
+ ) ,
48
+ CONST . TIMING . SPINNER_TIMEOUT ,
49
+ ) ;
31
50
}
32
51
33
- const additionalStyles = _ . isArray ( props . style ) ? props . style : [ props . style ] ;
34
- return (
35
- < View style = { [ StyleSheet . absoluteFillObject , styles . fullScreenLoading , ...additionalStyles ] } >
36
- < ActivityIndicator color = { themeColors . spinner } size = "large" />
37
- </ View >
38
- ) ;
39
- } ;
52
+ componentWillUnmount ( ) {
53
+ if ( ! this . timeoutID ) {
54
+ return ;
55
+ }
56
+
57
+ clearTimeout ( this . timeoutID ) ;
58
+ Log . info ( '[LoadingIndicator] Disappeared' , false , this . props . logDetail ) ;
59
+ }
60
+
61
+ render ( ) {
62
+ const additionalStyles = _ . isArray ( this . props . style ) ? this . props . style : [ this . props . style ] ;
63
+ return (
64
+ < View style = { [ StyleSheet . absoluteFillObject , styles . fullScreenLoading , ...additionalStyles ] } >
65
+ < ActivityIndicator color = { themeColors . spinner } size = "large" />
66
+ </ View >
67
+ ) ;
68
+ }
69
+ }
40
70
41
71
FullScreenLoadingIndicator . propTypes = propTypes ;
42
72
FullScreenLoadingIndicator . defaultProps = defaultProps ;
0 commit comments