using updateTimestamp to show placeholder first first wallet load

src/redux/reducers/walletReducer.ts

@@ -34,7 +34,7 @@ export interface CoinActivities {
 }
 
 interface State {
-    selectedCoins:CoinBase[],
+    selectedCoins:CoinBase[];
     coinsData:{
         [key: string]: CoinData;
     },
@@ -43,7 +43,8 @@ interface State {
     }
     coinsActivities:{
         [key: string]: CoinActivities;
-    }
+    },
+    updateTimestamp:number;
 }
 
 const initialState:State = {
@@ -51,6 +52,7 @@ const initialState:State = {
     coinsData:{},
     priceHistories:{},
     coinsActivities:{},
+    updateTimestamp:0
 };
   
 export default function (state = initialState, action) {
@@ -65,7 +67,8 @@ export default function (state = initialState, action) {
     case SET_COINS_DATA:{
         return {
             ...state,
-            coinsData:payload
+            coinsData:payload,
+            updateTimestamp:new Date().getTime()
         }
     }
     case SET_PRICE_HISTORY:{

src/screens/wallet/screen/walletScreen.tsx

@@ -12,6 +12,8 @@ import {
   Header,
   HorizontalIconList,
   ListPlaceHolder,
+  PostCardPlaceHolder,
+  PostPlaceHolder,
 } from '../../../components';
 
 
@@ -33,6 +35,7 @@ import { COIN_IDS } from '../../../constants/defaultCoins';
 import { claimPoints } from '../../../providers/ecency/ePoint';
 import { claimRewardBalance, getAccount } from '../../../providers/hive/dhive';
 import { toastNotification } from '../../../redux/actions/uiAction';
+import moment from 'moment';
 
 
 const CHART_DAYS_RANGE = 1;
@@ -46,10 +49,12 @@ const WalletScreen = ({navigation}) => {
   const selectedCoins = useAppSelector((state)=>state.wallet.selectedCoins);
   const priceHistories = useAppSelector((state)=>state.wallet.priceHistories);
   const coinsData = useAppSelector((state)=>state.wallet.coinsData);
+  const updateTimestamp = useAppSelector((state)=>state.wallet.updateTimestamp);
   const globalProps = useAppSelector((state)=>state.account.globalProps);
   const currentAccount = useAppSelector((state)=>state.account.currentAccount);
   const pinHash = useAppSelector((state)=>state.application.pin);
 
+
   const [isLoading, setIsLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [isClaiming, setIsClaiming] = useState(false);
@@ -198,14 +203,17 @@ const WalletScreen = ({navigation}) => {
     );
   };
 
+  const _renderHeader = () => {
+    return (
+      <View style={styles.header}>
+        <Text style={styles.lastUpdateText}>
+          {isLoading? 'Updating...':`Last Updated: ${moment(updateTimestamp).format('HH:mm:ss')}`}
+        </Text>
+      </View>
+    )
+  }
 
 
-  const _renderLoading = () => {
-    if (isLoading) {
-      return <ListPlaceHolder />;
-    }
-  };
-
   const _refreshControl = (
     <RefreshControl
       refreshing={refreshing}
@@ -226,10 +234,11 @@ const WalletScreen = ({navigation}) => {
           {() => (
             <View style={styles.listWrapper}>
               <FlatList
-                data={selectedCoins}
+                data={updateTimestamp ? selectedCoins : []}
                 extraData={coinsData}
                 style={globalStyles.tabBarBottom}
-                ListEmptyComponent={_renderLoading}
+                ListEmptyComponent={<PostCardPlaceHolder />}
+                ListHeaderComponent={_renderHeader}
                 renderItem={_renderItem}
                 keyExtractor={(item, index) => index.toString()}
                 refreshControl={_refreshControl}

src/screens/wallet/screen/walletScreenStyles.js

@@ -5,7 +5,12 @@ export default EStyleSheet.create({
     padding: 0,
   },
   header: {
-    backgroundColor: '$primaryBackgroundColor',
+    alignItems: 'flex-end',
+    paddingHorizontal: 16,
+  },
+  lastUpdateText: {
+    color: '$iconColor',
+    fontSize: 10,
   },
   dotStyle: {
     backgroundColor: '$primaryDarkText',