Merge pull request DylanVann#4 from SocialMediaEmotions/john/issue/118

show placeholder when timer is expired
Peretz30 · Mar 19, 2019 · eda9027 · eda9027
2 parents b286d2f + de6ece4
commit eda9027
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,8 @@ module.exports = {
     parser: 'babel-eslint',
     env: {
         es6: true,
+        browser: true,
+        node: true,
     },
     plugins: ['jest'],
     overrides: {

diff --git a/src/index.js b/src/index.js
@@ -12,20 +12,36 @@ import {
 const FastImageViewNativeModule = NativeModules.FastImageView
 
 class FastImage extends Component {
+    componentDidMount() {
+        this.runTimer()
+    }
+
     componentDidUpdate(prevProps) {
-        if (this.props.source.uri === prevProps.source.uri) {
-            return
+        if (this.props.source.uri !== prevProps.source.uri) {
+            this.setState({
+                loaded: false,
+                error: null,
+                expired: false,
+            })
+
+            this.runTimer()
         }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout)
+    }
 
-        this.setState({
-            loaded: false,
-            error: null,
-        })
+    runTimer() {
+        this.timeout = setTimeout(() => {
+            this.setState({ expired: true })
+        }, 1000)
     }
 
     state = {
         loaded: false,
         error: null,
+        expired: false,
     }
 
     setNativeProps(nativeProps) {
@@ -49,7 +65,7 @@ class FastImage extends Component {
             ...props
         } = this.props
 
-        const { loaded, error } = this.state
+        const { expired, loaded, error } = this.state
         const resolvedSource = Image.resolveAssetSource(source)
 
         if (fallback) {
@@ -58,7 +74,7 @@ class FastImage extends Component {
                     style={[styles.imageContainer, style]}
                     ref={this.captureRef}
                 >
-                    {(!loaded || error) && placeholder}
+                    {expired && (!loaded || error) && placeholder}
                     <FastImageView
                         {...props}
                         style={StyleSheet.absoluteFill}
@@ -76,7 +92,7 @@ class FastImage extends Component {
 
         return (
             <View style={[styles.imageContainer, style]} ref={this.captureRef}>
-                {(!loaded || error) && placeholder}
+                {expired && (!loaded || error) && placeholder}
                 <FastImageView
                     {...props}
                     style={StyleSheet.absoluteFill}