Lightbox spinner: Show spinner in Lightbox when slow to load

Previously, Lightbox remains black until an image is loaded from the
server.

Spinner will be shown to user in Lightbox, while an image is being
loaded. New state 'loaded' is defined in Lightbox component. When an
image is loaded, the state will be changed from 0 to 1 and flex
value of 'PhotoView' also will be changed from 0 to 1.

Fixes #2896.

Author: AdityaHirapara

src/lightbox/Lightbox.js

@@ -15,12 +15,10 @@ import { constructActionSheetButtons, executeActionSheetAction } from './Lightbo
 import { NAVBAR_SIZE } from '../styles';
 import { getGravatarFromEmail } from '../utils/avatar';
 import { navigateBack } from '../actions';
+import { LoadingIndicator } from '../common';
 
 const styles = StyleSheet.create({
-  img: {
-    height: 300,
-    flex: 1,
-  },
+  img: {},
   header: {},
   overlay: {
     backgroundColor: 'black',
@@ -46,12 +44,14 @@ type Props = {
 
 type State = {
   movement: 'in' | 'out',
+  loaded: 0 | 1,
 };
 
 class Lightbox extends PureComponent<Props, State> {
   props: Props;
   state: State = {
     movement: 'out',
+    loaded: 0,
   };
 
   handleImagePress = () => {
@@ -90,6 +90,12 @@ class Lightbox extends PureComponent<Props, State> {
     movement: this.state.movement,
   });
 
+  showImage = () => {
+    this.setState(({ loaded }, props) => ({
+      loaded: 1,
+    }));
+  };
+
   render() {
     const { src, message, auth } = this.props;
     const footerMessage =
@@ -110,10 +116,12 @@ class Lightbox extends PureComponent<Props, State> {
           realm={auth.realm}
           {...this.getAnimationProps()}
         />
+        {!this.state.loaded && <LoadingIndicator />}
         <PhotoView
           source={resource}
-          style={[styles.img, { width }]}
+          style={[styles.img, { width }, { flex: this.state.loaded }]}
           resizeMode="contain"
+          onLoadEnd={this.showImage}
           onTap={this.handleImagePress}
         />
         <AnimatedLightboxFooter