Add summary include skeleton

Strides-APP/app/pages/chargeV2/SummaryV2.js

@@ -12,11 +12,13 @@ import utils from '../../utils/utils';
 import { PageList } from '../Router';
 import app from '../../../app.json';
 import TextView from '../../components/TextView';
+import Skeleton from 'react-native-reanimated-skeleton';
 
 export default class SummaryV2 extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       isActully: true,
       refreshing: false,
       summaryInfo: {
@@ -38,7 +40,7 @@ export default class SummaryV2 extends Component {
   componentDidMount() {
     const params = this.props.route.params;
     if (params.chargingPk) {
-      Dialog.showProgressDialog();
+      //Dialog.showProgressDialog();
       this.setState({
         chargingPk: params.chargingPk
       })
@@ -46,11 +48,13 @@ export default class SummaryV2 extends Component {
         this.setState({
           isActully: false
         });
-        this.getSummaryData(params.chargingPk);
+        setTimeout(() => {
+          this.getSummaryData(params.chargingPk);
+        }, 1000);
       } else {
         setTimeout(() => {
           this.getSummaryData(params.chargingPk);
-        }, 1500);
+        }, 3000);
       }
     }
     if (params.action) {
@@ -71,16 +75,17 @@ export default class SummaryV2 extends Component {
     apiCharge.getChargeSummaryV2({
       chargingPk: chargingPk
     }).then(res => {
-      Dialog.dismissLoading();
+      //Dialog.dismissLoading();
       if (res.data) {
         this.setState({
+          loading: false,
           refreshing: false,
           summaryInfo: res.data,
           isPendding: (res.data.hasSettled != true)
         });
       }
     }).catch((err) => {
-      Dialog.dismissLoading();
+      //Dialog.dismissLoading();
       toastShort(err);
       this.setState({
         isPendding: true,
@@ -133,6 +138,58 @@ export default class SummaryV2 extends Component {
     }
   }
 
+  isLoading(precond) {
+    return utils.isNotEmpty(precond) || this.state.loading;
+  }
+
+  getSkeletonLeft(size=3) {
+    const list = [];
+    for (let i = 0; i < size; i++) {
+      list.push({width: i % 2 ==0 ? '100%' : '70%', height: 18, marginTop: 4, marginBottom: 4, borderRadius: 3});
+    }
+    return list;
+  }
+
+  getSkeletonRight(size=3) {
+    const list = [];
+    for (let i = 0; i < size; i++) {
+      list.push({width: '100%', height: 18, marginTop: 4, marginBottom: 4, borderRadius: 3});
+    }
+    return list;
+  }
+
+  getSectionSkeleton(size) {
+    if (this.state.loading) {
+      return (
+        <View style={[styles.sections, ui.flexc]}>
+          <Skeleton
+            containerStyle={ui.flex2}
+            isLoading={this.state.loading}
+            boneColor='#eeeeee'
+            highlightColor='#f6f6f6'
+            animationType="shiver"
+            layout={this.getSkeletonLeft(size)}
+            animationDirection={'horizontalRight'}>
+            
+          </Skeleton>
+          <View style={ui.flex2}></View>
+          <Skeleton
+            containerStyle={ui.flex1}
+            isLoading={this.state.loading}
+            boneColor='#eeeeee'
+            highlightColor='#f6f6f6'
+            animationType="shiver"
+            layout={this.getSkeletonRight(size)}
+            animationDirection={'horizontalRight'}>
+            
+          </Skeleton>
+        </View>
+      )
+    } else {
+      return <></>
+    }
+  }
+
   render() {
     if (this.state.isPendding) {
       return (
@@ -165,15 +222,39 @@ export default class SummaryV2 extends Component {
               onRefresh={() => this.onRefresh()}
             />
           }>
-          { utils.isNotEmpty(this.state.summaryInfo.top) &&
+          { this.isLoading(this.state.summaryInfo.top) &&
             <View style={styles.headerView}>
               { this.state.isActully && <>
-                <Octicons
-                  name="check-circle-fill"
-                  color={colorAccent}
-                  size={56}/>
-                <TextView style={styles.topTitle}>{$t('receipt.successful')}</TextView>
-                <TextView style={styles.topDesc}>{$t('receipt.chargingSessionComplete')}</TextView>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 56, height: 56, borderRadius: 56}]}
+                  animationDirection={'horizontalRight'}>
+                  <Octicons
+                    name="check-circle-fill"
+                    color={colorAccent}
+                    size={56}/>
+                </Skeleton>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 60, height: 20, marginTop: 8, borderRadius: 3}]}
+                  animationDirection={'horizontalRight'}>
+                  <TextView style={styles.topTitle}>{$t('receipt.successful')}</TextView>
+                </Skeleton>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 100, height: 18, marginTop: 4, marginBottom: 32, borderRadius: 3}]}
+                  animationDirection={'horizontalRight'}>
+                  <TextView style={styles.topDesc}>{$t('receipt.chargingSessionComplete')}</TextView>
+                </Skeleton>
               </>}
               { utils.isNotEmpty(this.state.summaryInfo.top.company) &&
                 <View style={styles.formRow}>
@@ -188,19 +269,49 @@ export default class SummaryV2 extends Component {
                 </View>
               }
               <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelTransactionID')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.transactionId}</TextView>
-              </View>
-              <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelReferenceID')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.referenceId}</TextView>
-              </View>
-              <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelDateTime')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.dateTime}</TextView>
+                <Skeleton
+                  containerStyle={ui.flex1}
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={this.getSkeletonLeft()}
+                  animationDirection={'horizontalRight'}>
+                  
+                </Skeleton>
+                <View style={ui.flex2}></View>
+                <Skeleton
+                  containerStyle={ui.flex1}
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={this.getSkeletonRight()}
+                  animationDirection={'horizontalRight'}>
+                  
+                </Skeleton>
               </View>
+              { utils.isNotEmpty(this.state.summaryInfo.top.transactionId) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelTransactionID')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.transactionId}</TextView>
+                </View>
+              }
+              { utils.isNotEmpty(this.state.summaryInfo.top.referenceId) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelReferenceID')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.referenceId}</TextView>
+                </View>
+              }
+              { utils.isNotEmpty(this.state.summaryInfo.top.dateTime) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelDateTime')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.dateTime}</TextView>
+                </View>
+              }
             </View>
           }
+          {this.getSectionSkeleton(2)}
           {/* <View style={styles.sections}>
             <View style={styles.formRow}>
               <Text style={styles.label}>{$t('wallet.labelTransactionId')}</Text>
@@ -228,6 +339,7 @@ export default class SummaryV2 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.connector) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('wallet.labelYourConnector')}</TextView>
@@ -245,6 +357,7 @@ export default class SummaryV2 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.chargingFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownChargingFees')}</TextView>
@@ -262,6 +375,7 @@ export default class SummaryV2 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.idleFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownIdlesFees')}</TextView>
@@ -279,6 +393,7 @@ export default class SummaryV2 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.reservationFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownReservationFees')}</TextView>
@@ -296,6 +411,7 @@ export default class SummaryV2 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton(8)}
           { utils.isNotEmpty(this.state.summaryInfo.payment) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownPayment')}</TextView>
@@ -394,7 +510,7 @@ const styles = StyleSheet.create({
   topTitle: {
     color: textPrimary,
     fontSize: 16,
-    marginTop: 8,
+    paddingTop: 8,
     paddingLeft: 8,
     fontWeight: 'bold'
   },

Strides-APP/app/pages/chargeV2/SummaryV3.js

@@ -11,11 +11,13 @@ import { MyRefreshProps } from '../../components/ThemesConfig';
 import utils from '../../utils/utils';
 import { PageList } from '../Router';
 import TextView from '../../components/TextView';
+import Skeleton from 'react-native-reanimated-skeleton';
 
 export default class SummaryV3 extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       isActully: true,
       refreshing: false,
       summaryInfo: {
@@ -37,7 +39,7 @@ export default class SummaryV3 extends Component {
   componentDidMount() {
     const params = this.props.route.params;
     if (params.chargingPk) {
-      Dialog.showProgressDialog();
+      //Dialog.showProgressDialog();
       this.setState({
         chargingPk: params.chargingPk
       })
@@ -45,11 +47,13 @@ export default class SummaryV3 extends Component {
         this.setState({
           isActully: false
         });
-        this.getSummaryData(params.chargingPk);
+        setTimeout(() => {
+          this.getSummaryData(params.chargingPk);
+        }, 1000);
       } else {
         setTimeout(() => {
           this.getSummaryData(params.chargingPk);
-        }, 1500);
+        }, 3000);
       }
     }
     if (params.action) {
@@ -70,16 +74,17 @@ export default class SummaryV3 extends Component {
     apiCharge.getChargeSummaryV2({
       chargingPk: chargingPk
     }).then(res => {
-      Dialog.dismissLoading();
+      //Dialog.dismissLoading();
       if (res.data) {
         this.setState({
+          loading: false,
           refreshing: false,
           summaryInfo: res.data,
           isPendding: (res.data.hasSettled != true)
         });
       }
     }).catch((err) => {
-      Dialog.dismissLoading();
+      //Dialog.dismissLoading();
       toastShort(err);
       this.setState({
         isPendding: true,
@@ -132,6 +137,58 @@ export default class SummaryV3 extends Component {
     }
   }
 
+  isLoading(precond) {
+    return utils.isNotEmpty(precond) || this.state.loading;
+  }
+
+  getSkeletonLeft(size=3) {
+    const list = [];
+    for (let i = 0; i < size; i++) {
+      list.push({width: i % 2 ==0 ? '100%' : '70%', height: 18, marginTop: 4, marginBottom: 4, borderRadius: 3});
+    }
+    return list;
+  }
+
+  getSkeletonRight(size=3) {
+    const list = [];
+    for (let i = 0; i < size; i++) {
+      list.push({width: '100%', height: 18, marginTop: 4, marginBottom: 4, borderRadius: 3});
+    }
+    return list;
+  }
+
+  getSectionSkeleton(size) {
+    if (this.state.loading) {
+      return (
+        <View style={[styles.sections, ui.flexc]}>
+          <Skeleton
+            containerStyle={ui.flex2}
+            isLoading={this.state.loading}
+            boneColor='#eeeeee'
+            highlightColor='#f6f6f6'
+            animationType="shiver"
+            layout={this.getSkeletonLeft(size)}
+            animationDirection={'horizontalRight'}>
+            
+          </Skeleton>
+          <View style={ui.flex2}></View>
+          <Skeleton
+            containerStyle={ui.flex1}
+            isLoading={this.state.loading}
+            boneColor='#eeeeee'
+            highlightColor='#f6f6f6'
+            animationType="shiver"
+            layout={this.getSkeletonRight(size)}
+            animationDirection={'horizontalRight'}>
+            
+          </Skeleton>
+        </View>
+      )
+    } else {
+      return <></>
+    }
+  }
+
   render() {
     if (this.state.isPendding) {
       return (
@@ -164,15 +221,39 @@ export default class SummaryV3 extends Component {
               onRefresh={() => this.onRefresh()}
             />
           }>
-          { utils.isNotEmpty(this.state.summaryInfo.top) &&
+          { this.isLoading(this.state.summaryInfo.top) &&
             <View style={styles.headerView}>
               { this.state.isActully && <>
-                <Octicons
-                  name="check-circle-fill"
-                  color={colorAccent}
-                  size={56}/>
-                <TextView style={styles.topTitle}>{$t('receipt.successful')}</TextView>
-                <TextView style={styles.topDesc}>{$t('receipt.chargingSessionComplete')}</TextView>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 56, height: 56, borderRadius: 56}]}
+                  animationDirection={'horizontalRight'}>
+                  <Octicons
+                    name="check-circle-fill"
+                    color={colorAccent}
+                    size={56}/>
+                </Skeleton>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 60, height: 20, marginTop: 8, borderRadius: 3}]}
+                  animationDirection={'horizontalRight'}>
+                  <TextView style={styles.topTitle}>{$t('receipt.successful')}</TextView>
+                </Skeleton>
+                <Skeleton
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={[{width: 100, height: 18, marginTop: 4, marginBottom: 32, borderRadius: 3}]}
+                  animationDirection={'horizontalRight'}>
+                  <TextView style={styles.topDesc}>{$t('receipt.chargingSessionComplete')}</TextView>
+                </Skeleton>
               </>}
               { utils.isNotEmpty(this.state.summaryInfo.top.company) &&
                 <View style={styles.formRow}>
@@ -187,19 +268,49 @@ export default class SummaryV3 extends Component {
                 </View>
               }
               <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelTransactionID')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.transactionId}</TextView>
-              </View>
-              <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelReferenceID')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.referenceId}</TextView>
-              </View>
-              <View style={styles.formRow}>
-                <TextView style={styles.label}>{$t('receipt.labelDateTime')}</TextView>
-                <TextView style={styles.text}>{this.state.summaryInfo.top.dateTime}</TextView>
+                <Skeleton
+                  containerStyle={ui.flex1}
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={this.getSkeletonLeft()}
+                  animationDirection={'horizontalRight'}>
+                  
+                </Skeleton>
+                <View style={ui.flex2}></View>
+                <Skeleton
+                  containerStyle={ui.flex1}
+                  isLoading={this.state.loading}
+                  boneColor='#eeeeee'
+                  highlightColor='#f6f6f6'
+                  animationType="shiver"
+                  layout={this.getSkeletonRight()}
+                  animationDirection={'horizontalRight'}>
+                  
+                </Skeleton>
               </View>
+              { utils.isNotEmpty(this.state.summaryInfo.top.transactionId) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelTransactionID')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.transactionId}</TextView>
+                </View>
+              }
+              { utils.isNotEmpty(this.state.summaryInfo.top.referenceId) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelReferenceID')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.referenceId}</TextView>
+                </View>
+              }
+              { utils.isNotEmpty(this.state.summaryInfo.top.dateTime) &&
+                <View style={styles.formRow}>
+                  <TextView style={styles.label}>{$t('receipt.labelDateTime')}</TextView>
+                  <TextView style={styles.text}>{this.state.summaryInfo.top.dateTime}</TextView>
+                </View>
+              }
             </View>
           }
+          {this.getSectionSkeleton(2)}
           { utils.isNotEmpty(this.state.summaryInfo.station) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('wallet.labelYourStation')}</TextView>
@@ -213,6 +324,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.connector) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('wallet.labelYourConnector')}</TextView>
@@ -230,6 +342,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton(1)}
           { utils.isNotEmpty(this.state.summaryInfo.payment?.pointsReward) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.labelPointsRewards')}</TextView>
@@ -239,6 +352,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton(1)}
           { utils.isNotEmpty(this.state.summaryInfo.vouchers) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.labelVoucherUsage')}</TextView>
@@ -253,6 +367,7 @@ export default class SummaryV3 extends Component {
               )}
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.chargingFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownChargingFees')}</TextView>
@@ -270,6 +385,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.idleFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownIdlesFees')}</TextView>
@@ -287,6 +403,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton()}
           { utils.isNotEmpty(this.state.summaryInfo.reservationFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownReservationFees')}</TextView>
@@ -304,6 +421,7 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          {this.getSectionSkeleton(8)}
           { utils.isNotEmpty(this.state.summaryInfo.payment) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownPayment')}</TextView>
@@ -394,7 +512,7 @@ const styles = StyleSheet.create({
   topTitle: {
     color: textPrimary,
     fontSize: 16,
-    marginTop: 8,
+    paddingTop: 8,
     paddingLeft: 8,
     fontWeight: 'bold'
   },