ordering-ui-react-native 0.22.27-release → 0.22.28-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.27-release",
+  "version": "0.22.28-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/OrdersOption/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
-import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity, Animated, Easing } from 'react-native';
+import { useLanguage, useUtils, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -137,6 +137,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const showTagsList = !props.isAlsea && !props.isDriverApp && currentTabSelected !== 'logisticOrders'
+  const AnimatedFeatherIcon = Animated.createAnimatedComponent(FeatherIcon);
+  const spinValue = new Animated.Value(0);
 
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
@@ -457,6 +459,25 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     }
   }, [isNetConnected]);
 
+
+  const handleInitAnimation = () => {
+    Animated.timing(
+      spinValue,
+      {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }
+    ).start()
+  }
+
+  useEffect(() => {
+    if (currentOrdersGroup?.loading || logisticOrders?.loading) {
+      handleInitAnimation()
+    }
+  }, [currentOrdersGroup?.loading, logisticOrders?.loading])
+
   return (
     <>
       <View style={styles.header}>
@@ -466,12 +487,20 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             <WebsocketStatus />
           </View>
           {isNetConnected && (
-            <FeatherIcon
+            <AnimatedFeatherIcon
               name='refresh-cw'
               color={theme.colors.backgroundDark}
               size={24}
-              onPress={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
-              style={{ marginRight: 20 }}
+              onPress={() => currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}
+              style={{
+                marginRight: 20,
+                transform: [{
+                  rotate: spinValue.interpolate({
+                    inputRange: [0, 0.3],
+                    outputRange: ['0deg', '360deg'],
+                  })
+                }]
+              }}
             />
           )}
           <FontistoIcon