fixed #400

src/components/animations/pulse/pulseAnimation.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  View, Text, Image, StyleSheet,
+  View, Image, StyleSheet,
 } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -35,25 +35,25 @@ export default class PulseAnimation extends Component {
     },
   };
 
+  mounted = true;
+
   constructor(props) {
     super(props);
 
     this.state = {
-      color: this.props.color,
-      duration: this.props.duration,
-      image: this.props.image,
-      maxDiameter: this.props.diameter,
-      numPulses: this.props.numPulses,
+      color: props.color,
+      duration: props.duration,
+      image: props.image,
+      maxDiameter: props.diameter,
+      numPulses: props.numPulses,
       pulses: [],
-      pulseStyle: this.props.pulseStyle,
-      speed: this.props.speed,
+      pulseStyle: props.pulseStyle,
+      speed: props.speed,
       started: false,
-      style: this.props.style,
+      style: props.style,
     };
   }
 
-  mounted = true;
-
   componentDidMount() {
     const { numPulses, duration, speed } = this.state;
 
@@ -79,15 +79,16 @@ export default class PulseAnimation extends Component {
     clearInterval(this.timer);
   }
 
-  createPulse = (pKey) => {
+  createPulse = () => {
     if (this.mounted) {
-      const pulses = this.state.pulses;
+      const { pulses, maxDiameter } = this.state;
+      const { initialDiameter } = this.props;
 
       const pulse = {
         pulseKey: pulses.length + 1,
-        diameter: this.props.initialDiameter,
+        diameter: initialDiameter,
         opacity: 0.5,
-        centerOffset: (this.state.maxDiameter - this.props.initialDiameter) / 2,
+        centerOffset: (maxDiameter - initialDiameter) / 2,
       };
 
       pulses.push(pulse);
@@ -99,10 +100,10 @@ export default class PulseAnimation extends Component {
   updatePulse = () => {
     if (this.mounted) {
       const pulses = this.state.pulses.map((p, i) => {
-        const maxDiameter = this.state.maxDiameter;
+        const { maxDiameter } = this.state;
         const newDiameter = p.diameter > maxDiameter ? 0 : p.diameter + 2;
         const centerOffset = (maxDiameter - newDiameter) / 2;
-        const opacity = Math.abs(newDiameter / this.state.maxDiameter - 1);
+        const opacity = Math.abs(newDiameter / maxDiameter - 1);
 
         const pulse = {
           pulseKey: i + 1,

src/components/filterBar/view/filterBarView.js

@@ -7,6 +7,7 @@ import { DropdownButton } from '../../dropdownButton';
 
 // Components
 import { LineBreak } from '../../basicUIElements';
+import { PulseAnimation } from '../../animations';
 
 // Styles
 import styles from './filterBarStyles';
@@ -22,12 +23,12 @@ const FilterBarView = ({
   iconSize,
   isHide,
   onDropdownSelect,
-  pageType,
   onRightIconPress,
   options,
   rightIconName,
   rightIconType,
   selectedOptionIndex,
+  rightIconLoading,
 }) => (
   <View style={styles.container}>
     {!isHide && (
@@ -40,7 +41,7 @@ const FilterBarView = ({
             onSelect={onDropdownSelect}
             selectedOptionIndex={selectedOptionIndex}
           />
-          {rightIconName && (
+          {rightIconName && !rightIconLoading && (
             <TouchableOpacity
               onPress={() => onRightIconPress && onRightIconPress()}
               style={styles.rightIconWrapper}
@@ -53,6 +54,18 @@ const FilterBarView = ({
               />
             </TouchableOpacity>
           )}
+          {rightIconName && rightIconLoading && (
+            <View style={styles.rightIconWrapper}>
+              <PulseAnimation
+                color="#357ce6"
+                numPulses={1}
+                diameter={20}
+                speed={100}
+                duration={100}
+                isShow={!rightIconLoading}
+              />
+            </View>
+          )}
         </View>
       </LineBreak>
     )}

src/components/notification/view/notificationView.js

@@ -143,7 +143,9 @@ class NotificationView extends PureComponent {
   };
 
   render() {
-    const { readAllNotification, getActivities, loading } = this.props;
+    const {
+      readAllNotification, getActivities, loading, readAllNotificationLoading,
+    } = this.props;
     const { filters, selectedFilter } = this.state;
 
     const _notifications = this._getNotificationsArrays();
@@ -165,6 +167,7 @@ class NotificationView extends PureComponent {
           onDropdownSelect={this._handleOnDropdownSelect}
           rightIconName="ios-checkmark"
           onRightIconPress={readAllNotification}
+          rightIconLoading={readAllNotificationLoading}
         />
         <ScrollView
           style={styles.scrollView}

src/screens/notification/container/notificationContainer.js

@@ -18,6 +18,7 @@ class NotificationContainer extends Component {
       notifications: [],
       lastNotificationId: null,
       notificationLoading: false,
+      readAllNotificationLoading: false,
     };
   }
 
@@ -77,10 +78,13 @@ class NotificationContainer extends Component {
   _readAllNotification = () => {
     const { username, dispatch } = this.props;
     const { notifications } = this.state;
+
+    this.setState({ readAllNotificationLoading: true });
+
     markActivityAsRead(username).then((result) => {
       dispatch(updateUnreadActivityCount(result.unread));
       const updatedNotifications = notifications.map(item => ({ ...item, read: 1 }));
-      this.setState({ notifications: updatedNotifications });
+      this.setState({ notifications: updatedNotifications, readAllNotificationLoading: false });
     });
   };
 
@@ -91,7 +95,7 @@ class NotificationContainer extends Component {
   };
 
   render() {
-    const { notifications, notificationLoading } = this.state;
+    const { notifications, notificationLoading, readAllNotificationLoading } = this.state;
 
     return (
       <NotificationScreen
@@ -101,6 +105,7 @@ class NotificationContainer extends Component {
         readAllNotification={this._readAllNotification}
         handleLoginPress={this._handleOnPressLogin}
         notificationLoading={notificationLoading}
+        readAllNotificationLoading={readAllNotificationLoading}
         {...this.props}
       />
     );

src/screens/notification/screen/notificationScreen.js

@@ -30,6 +30,7 @@ class NotificationScreen extends PureComponent {
       handleLoginPress,
       isLoggedIn,
       notificationLoading,
+      readAllNotificationLoading,
     } = this.props;
 
     return (
@@ -53,6 +54,7 @@ class NotificationScreen extends PureComponent {
                 notifications={notifications}
                 navigateToNotificationRoute={navigateToNotificationRoute}
                 readAllNotification={readAllNotification}
+                readAllNotificationLoading={readAllNotificationLoading}
                 loading={notificationLoading}
               />
             ) : (