diff --git a/android/app/proguard-rules.pro b/android/app/proguard-rules.pro
index 15a66836..7860fdc3 100644
--- a/android/app/proguard-rules.pro
+++ b/android/app/proguard-rules.pro
@@ -74,4 +74,14 @@
 -keepclassmembers class ** {
   @org.greenrobot.eventbus.Subscribe <methods>;
 }
--keep enum org.greenrobot.eventbus.ThreadMode { *; }
\ No newline at end of file
+-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 *;
+}
\ No newline at end of file
diff --git a/src/components/FastImagePlaceholder.tsx b/src/components/FastImagePlaceholder.tsx
new file mode 100644
index 00000000..a3373098
--- /dev/null
+++ b/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
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 0e589445..44a6cfa4 100644
--- a/src/components/Loading.tsx
+++ b/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>
   )
diff --git a/src/components/TopupLoadingIndicator.tsx b/src/components/TopupLoadingIndicator.tsx
index 60e6e5bd..870f982d 100644
--- a/src/components/TopupLoadingIndicator.tsx
+++ b/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
diff --git a/src/screens/ConfirmPassword/index.tsx b/src/screens/ConfirmPassword/index.tsx
index f4eb2440..57bab935 100644
--- a/src/screens/ConfirmPassword/index.tsx
+++ b/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} />
         )}
diff --git a/src/screens/ConnectToWalletConnect/index.tsx b/src/screens/ConnectToWalletConnect/index.tsx
index ce2cec3f..17bccd97 100644
--- a/src/screens/ConnectToWalletConnect/index.tsx
+++ b/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>
diff --git a/src/screens/StakingPersonal/index.tsx b/src/screens/StakingPersonal/index.tsx
index 8c68227d..886ab80d 100644
--- a/src/screens/StakingPersonal/index.tsx
+++ b/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,19 +23,13 @@ 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,
   }: {
@@ -39,26 +37,18 @@ const Render = ({
   }): 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)
@@ -66,6 +56,12 @@ const StakingPersonal = ({ navigation }: Props): ReactElement => {
     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>
   )
 }
diff --git a/src/screens/TabStaking/ValidatorList.tsx b/src/screens/TabStaking/ValidatorList.tsx
index 0064a54f..be7655db 100644
--- a/src/screens/TabStaking/ValidatorList.tsx
+++ b/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(
diff --git a/src/screens/TabStaking/index.tsx b/src/screens/TabStaking/index.tsx
index a0f14fc0..a17d6521 100644
--- a/src/screens/TabStaking/index.tsx
+++ b/src/screens/TabStaking/index.tsx
@@ -57,14 +57,12 @@ const Render = ({
           />
         </View>
       ) : (
-        <View
+        <Loading
           style={{
             height: '100%',
             justifyContent: 'center',
           }}
-        >
-          <Loading />
-        </View>
+        />
       )}
     </>
   )
diff --git a/src/screens/TabSwap/index.tsx b/src/screens/TabSwap/index.tsx
index b98e6744..58b751fb 100644
--- a/src/screens/TabSwap/index.tsx
+++ b/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>
diff --git a/src/screens/ValidatorDetail/Top.tsx b/src/screens/ValidatorDetail/Top.tsx
index b47d5227..4e755d85 100644
--- a/src/screens/ValidatorDetail/Top.tsx
+++ b/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'}>
diff --git a/src/screens/ValidatorDetail/index.tsx b/src/screens/ValidatorDetail/index.tsx
index 1135b05a..27f143a0 100644
--- a/src/screens/ValidatorDetail/index.tsx
+++ b/src/screens/ValidatorDetail/index.tsx
@@ -1,12 +1,9 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { View } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { LAYOUT } from 'consts'
-
 import { navigationHeaderOptions } from 'components/layout/Header'
 import Body from 'components/layout/Body'
-import { useAuth, User, useValidator } from 'lib'
+import { useAuth, User, useValidator, ValidatorUI } from 'lib'
 
 import { RootStackParams } from '../../types/navigation'
 
@@ -20,41 +17,19 @@ type Props = StackScreenProps<RootStackParams, 'ValidatorDetail'>
 
 const Render = ({
   user,
-  address,
-  setLoadingComplete,
+  ui,
 }: {
   user?: User
-  address: string
-  setLoadingComplete: React.Dispatch<React.SetStateAction<boolean>>
+  ui?: ValidatorUI
 }): ReactElement => {
-  const { ui, loading } = useValidator(address, user)
-  useEffect(() => {
-    if (loading === false) {
-      setLoadingComplete(true)
-    }
-  }, [loading])
-
   return (
     <>
-      {loading ? (
-        <View
-          style={{
-            height: LAYOUT.getWindowHeight(),
-            justifyContent: 'center',
-          }}
-        >
-          <Loading />
-        </View>
-      ) : (
+      {ui && (
         <>
-          {ui && (
-            <>
-              <Top ui={ui} />
-              {user && <Actions ui={ui} user={user} />}
-              <MonikerInfo ui={ui} user={user} />
-              <Informations {...ui} />
-            </>
-          )}
+          <Top ui={ui} />
+          {user && <Actions ui={ui} user={user} />}
+          <MonikerInfo ui={ui} user={user} />
+          <Informations {...ui} />
         </>
       )}
     </>
@@ -68,12 +43,19 @@ const ValidatorDetail = ({
   const { user } = useAuth()
 
   const { address } = route.params
+  const { ui, loading } = useValidator(address, 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) {
@@ -85,19 +67,25 @@ const ValidatorDetail = ({
   }, [loadingComplete])
 
   return (
-    <Body
-      theme={'sky'}
-      containerStyle={{ paddingHorizontal: 0 }}
-      scrollable
-      onRefresh={refreshPage}
-    >
-      <Render
-        user={user}
-        address={address}
-        key={refreshingKey}
-        setLoadingComplete={setLoadingComplete}
-      />
-    </Body>
+    <>
+      <Body
+        theme={'sky'}
+        containerStyle={{ paddingHorizontal: 0 }}
+        scrollable={loadingComplete}
+        onRefresh={refreshPage}
+      >
+        {loadingComplete ? (
+          <Render user={user} ui={ui} key={refreshingKey} />
+        ) : (
+          <Loading
+            style={{
+              height: '100%',
+              justifyContent: 'center',
+            }}
+          />
+        )}
+      </Body>
+    </>
   )
 }
 
diff --git a/src/screens/WalletHistory.tsx b/src/screens/WalletHistory.tsx
index 82573175..e091c37f 100644
--- a/src/screens/WalletHistory.tsx
+++ b/src/screens/WalletHistory.tsx
@@ -83,13 +83,7 @@ const RenderList = ({
           </View>
         )}
         ListFooterComponent={
-          <>
-            {ui.more && (
-              <View style={{ height: 40 }}>
-                <Loading />
-              </View>
-            )}
-          </>
+          <>{ui.more && <Loading style={{ height: 40 }} />}</>
         }
         ListEmptyComponent={
           loading ? (