[HOLD for payment 2022-04-13] Feature Request: Add support for an image placeholder in chat - Reported by @mdneyazahmad

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app
2. Load big size image or any image on the slower network

Expected Result:

Image placeholder should display. Something like a loading spinner

Actual Result:

Blank square displayed

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.36-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

image-placeholder.mp4

Expensify/Expensify Issue URL:
Issue reported by: @mdneyazahmad
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643212660496300

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @nkuoch (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @mallenexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mdneyazahmad]

Proposal

Proposing as I reported this issue

We need to add a loading state to track when the image is loaded. Image component accepts a prop onLoadEnd which is fired when the image is successfully loaded or it has failed. We set loading to false when it is fired. All changes are made in file src/components/ImageWithSizeCalculation.js.

+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: true,
+        }
+    }

Now, conditionally display the loading indicator.

-import {Image} from 'react-native';
+import {Image, ActivityIndicator} from 'react-native';

+import themeColors from '../styles/themes/default'
 
     render() {
         return (
+            <>
                 <Image
                     style={[
                         styles.w100,
                         styles.h100,
+                        this.state.loading && styles.dNone,
                         this.props.style,
                     ]}
                     source={{uri: this.props.url}}
                     resizeMode="contain"
+                    onLoadEnd={() => this.setState({loading: false})}
+                />
+                {this.state.loading && (
+                    <ActivityIndicator
+                        size="large"
+                        color={themeColors.textSupporting}
+                        style={[styles.flex1]}
+                    />
+                )}
+            </>
         );
     }
 }

Result

Screen.Recording.2022-02-06.at.4.58.45.PM.mov