fix: refine status card spacing and shrink balance container during active sync

components/StatusCard.tsx

@@ -38,7 +38,8 @@ export default function StatusCard({
                     backgroundColor,
                     borderRadius: 10,
                     padding: 15,
-                    margin: 20
+                    marginHorizontal: 20,
+                    marginVertical: 8
                 }}
             >
                 <Text

stores/SyncStore.ts

@@ -1,4 +1,4 @@
-import { action, observable, when, runInAction } from 'mobx';
+import { action, observable, when, runInAction, computed } from 'mobx';
 import { EmitterSubscription, NativeModules } from 'react-native';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 
@@ -65,6 +65,11 @@ export default class SyncStore {
         this.stopRescanTracking();
     };
 
+    @computed
+    get isBusy() {
+        return this.isSyncing || this.isRecovering || this.isRescanning;
+    }
+
     public setExpressGraphSyncStatus = (syncing: boolean) =>
         (this.isInExpressGraphSync = syncing);
 

views/Wallet/BalancePane.tsx

@@ -925,7 +925,15 @@ export default class BalancePane extends React.PureComponent<
                                 <LightningBalance />
                             </View>
                         ) : (
-                            <View style={styles.balanceContainer}>
+                            <View
+                                style={[
+                                    styles.balanceContainer,
+                                    SyncStore.isBusy && {
+                                        marginTop: 30,
+                                        marginBottom: 15
+                                    }
+                                ]}
+                            >
                                 <BalanceViewCombined />
                             </View>
                         )}