Added image loading indicator

android/app/proguard-rules.pro

@@ -74,4 +74,14 @@
 -keepclassmembers class ** {
   @org.greenrobot.eventbus.Subscribe <methods>;
 }
--keep enum org.greenrobot.eventbus.ThreadMode { *; }
+-keep enum org.greenrobot.eventbus.ThreadMode { *; }
+
+# npm - fastimage
+-keep public class com.dylanvann.fastimage.* {*;}
+-keep public class com.dylanvann.fastimage.** {*;}
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}

src/components/FastImagePlaceholder.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement, useState } from 'react'
+import { Platform, StyleProp } from 'react-native'
+import FastImage, {
+  Source,
+  ImageStyle as FastImageStyle,
+} from 'react-native-fast-image'
+
+type FastImagePlaceholderProps = {
+  source: Source | number
+  style?: StyleProp<FastImageStyle>
+  placeholder: Source | number
+}
+
+function FastImagePlaceholder({
+  source,
+  style,
+  placeholder,
+}: FastImagePlaceholderProps): ReactElement {
+  const isLocalSource = typeof source !== 'number'
+  const [loading, setLoading] = useState(isLocalSource)
+
+  return (
+    <>
+      {loading && <FastImage source={placeholder} style={style} />}
+      <FastImage
+        source={source}
+        style={loading ? { flex: 0 } : style}
+        onLoad={(): void => setLoading(false)}
+        fallback={Platform.OS === 'android' && isLocalSource}
+      />
+    </>
+  )
+}
+
+export default FastImagePlaceholder

src/components/Loading.tsx

@@ -8,10 +8,15 @@ const Loading = (props: {
 }): ReactElement => {
   const size = props.size || 38
   return (
-    <View style={[{ alignItems: 'center' }, props.style]}>
+    <View
+      style={[
+        { alignItems: 'center', marginBottom: 20 },
+        props.style,
+      ]}
+    >
       <Image
         source={images.loading_circle}
-        style={{ width: size, height: size, marginBottom: 20 }}
+        style={{ width: size, height: size }}
       />
     </View>
   )

src/components/TopupLoadingIndicator.tsx

@@ -1,9 +1,8 @@
 import React, { ReactElement } from 'react'
-import { View } from 'react-native'
 import { Loading } from 'components'
 
 const TopupLoadingIndicator = (): ReactElement => (
-  <View
+  <Loading
     style={{
       position: 'absolute',
       flex: 1,
@@ -12,9 +11,7 @@ const TopupLoadingIndicator = (): ReactElement => (
       alignContent: 'center',
       justifyContent: 'center',
     }}
-  >
-    <Loading />
-  </View>
+  />
 )
 
 export default TopupLoadingIndicator

src/screens/ConfirmPassword/index.tsx

@@ -79,9 +79,7 @@ const Render = ({
         }}
       >
         {_.some(fee.status) ? (
-          <View style={{ marginTop: 20 }}>
-            <Loading size={24} />
-          </View>
+          <Loading style={{ marginTop: 20 }} size={24} />
         ) : (
           <UseStationForm form={form} />
         )}

src/screens/ConnectToWalletConnect/index.tsx

@@ -218,9 +218,7 @@ const Render = ({
           </View>
         ) : (
           <View>
-            <View style={{ marginBottom: 30 }}>
-              <Loading />
-            </View>
+            <Loading style={{ marginBottom: 30 }} />
             <Text style={styles.title} fontType="medium">
               Ready to Connect
             </Text>

src/screens/StakingPersonal/index.tsx

@@ -1,12 +1,16 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useStaking, useAuth, User, ValidatorUI } from 'lib'
+import {
+  useStaking,
+  useAuth,
+  User,
+  ValidatorUI,
+  StakingPersonal as StationStakingPersonal,
+  StakingUI,
+} from 'lib'
 import { StackScreenProps } from '@react-navigation/stack'
 
 import { navigationHeaderOptions } from 'components/layout/Header'
 import Body from 'components/layout/Body'
-import { View } from 'react-native'
-
-import { LAYOUT } from 'consts'
 
 import { RootStackParams } from 'types'
 
@@ -19,53 +23,45 @@ type Props = StackScreenProps<RootStackParams, 'Staking'>
 
 const Render = ({
   user,
-  setLoadingComplete,
+  personal,
+  ui,
 }: {
   user?: User
-  setLoadingComplete: React.Dispatch<React.SetStateAction<boolean>>
+  personal: StationStakingPersonal
+  ui?: StakingUI
 }): ReactElement => {
-  const { personal, ui, loading } = useStaking(user)
-
-  useEffect(() => {
-    if (loading === false) {
-      setLoadingComplete(true)
-    }
-  }, [loading])
-
   const findMoniker = ({
     name,
   }: {
     name: string
   }): ValidatorUI | undefined =>
     ui?.contents.find((x) => x.moniker === name)
 
-  return personal ? (
+  return (
     <>
       {user && <Rewards personal={personal} user={user} />}
       <Delegated personal={personal} findMoniker={findMoniker} />
       <UnDelegated personal={personal} findMoniker={findMoniker} />
     </>
-  ) : (
-    <View
-      style={{
-        height: LAYOUT.getWindowHeight(),
-        justifyContent: 'center',
-      }}
-    >
-      <Loading />
-    </View>
   )
 }
 
 const StakingPersonal = ({ navigation }: Props): ReactElement => {
   const { user } = useAuth()
+  const { personal, ui, loading } = useStaking(user)
   const [loadingComplete, setLoadingComplete] = useState(false)
 
   const [refreshingKey, setRefreshingKey] = useState(0)
   const refreshPage = async (): Promise<void> => {
     setRefreshingKey((ori) => ori + 1)
   }
 
+  useEffect(() => {
+    if (loading === false) {
+      setLoadingComplete(true)
+    }
+  }, [loading])
+
   useEffect(() => {
     let unsubscribe
     if (loadingComplete) {
@@ -80,14 +76,27 @@ const StakingPersonal = ({ navigation }: Props): ReactElement => {
     <Body
       theme={'sky'}
       containerStyle={{ paddingTop: 20 }}
-      scrollable
+      scrollable={loadingComplete}
       onRefresh={refreshPage}
     >
-      <Render
-        key={refreshingKey}
-        user={user}
-        setLoadingComplete={setLoadingComplete}
-      />
+      {loadingComplete ? (
+        personal && (
+          <Render
+            user={user}
+            personal={personal}
+            ui={ui}
+            key={refreshingKey}
+          />
+        )
+      ) : (
+        <Loading
+          style={{
+            flex: 1,
+            height: '100%',
+            justifyContent: 'center',
+          }}
+        />
+      )}
     </Body>
   )
 }

src/screens/TabStaking/ValidatorList.tsx

@@ -20,6 +20,7 @@ import Preferences, {
 } from 'nativeModules/preferences'
 import { StakingFilterEnum } from './index'
 import { RootStackParams } from 'types'
+import FastImagePlaceholder from 'components/FastImagePlaceholder'
 
 const ValidatorList = ({
   contents,
@@ -103,7 +104,7 @@ const ValidatorList = ({
                 address: item.operatorAddress.address,
               })
             }
-            key={`contents${index}`}
+            key={`validator${index}`}
           >
             <View
               style={{
@@ -153,16 +154,17 @@ const ValidatorList = ({
                     </Text>
                   }
                 </View>
-                <FastImage
+                <FastImagePlaceholder
                   source={
                     item.profile
                       ? {
                           uri: item.profile,
-                          cache: FastImage.cacheControl.immutable,
+                          cache: FastImage.cacheControl.web,
                         }
                       : images.terra
                   }
                   style={styles.profileImage}
+                  placeholder={images.loading_circle}
                 />
                 {validatorList &&
                 _.some(

src/screens/TabStaking/index.tsx

@@ -57,14 +57,12 @@ const Render = ({
           />
         </View>
       ) : (
-        <View
+        <Loading
           style={{
             height: '100%',
             justifyContent: 'center',
           }}
-        >
-          <Loading />
-        </View>
+        />
       )}
     </>
   )

src/screens/TabSwap/index.tsx

@@ -497,15 +497,13 @@ const Swap = (props: Props): ReactElement => {
                 {...props}
               />
             ) : (
-              <View
+              <Loading
                 style={{
                   height: '100%',
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}
-              >
-                <Loading />
-              </View>
+              />
             )}
           </Fragment>
         </Body>

src/screens/ValidatorDetail/Top.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { Image, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import _ from 'lodash'
 
 import { Text, Icon } from 'components'
@@ -8,6 +8,7 @@ import { ValidatorUI } from 'lib'
 import images from 'assets/images'
 import { COLOR } from 'consts'
 import useTerraAssets from 'lib/hooks/useTerraAssets'
+import FastImagePlaceholder from 'components/FastImagePlaceholder'
 
 const Top = ({ ui }: { ui: ValidatorUI }): ReactElement => {
   const { profile, moniker, status, operatorAddress } = ui
@@ -27,9 +28,10 @@ const Top = ({ ui }: { ui: ValidatorUI }): ReactElement => {
   return (
     <View style={styles.container}>
       <View>
-        <Image
+        <FastImagePlaceholder
           source={profile ? { uri: profile } : images.terra}
           style={styles.profileImage}
+          placeholder={images.loading_circle}
         />
       </View>
       <Text style={styles.moniker} fontType={'bold'}>