Added loading feature for notification screen

src/components/notification/view/notificationStyles.js

@@ -5,4 +5,17 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
     flex: 1,
   },
+  flatlistFooter: {
+    alignContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+    marginBottom: 40,
+    borderColor: '$borderColor',
+  },
+  loading: {
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
 });

src/components/notification/view/notificationView.js

@@ -1,5 +1,7 @@
 import React, { PureComponent, Fragment } from 'react';
-import { View, ScrollView, FlatList } from 'react-native';
+import {
+  View, ScrollView, FlatList, ActivityIndicator,
+} from 'react-native';
 import { injectIntl } from 'react-intl';
 
 // Constants
@@ -69,6 +71,18 @@ class NotificationView extends PureComponent {
     );
   };
 
+  _renderFooterLoading = () => {
+    const { loading, notifications } = this.props;
+    if (loading && notifications.length > 0) {
+      return (
+        <View style={styles.flatlistFooter}>
+          <ActivityIndicator animating size="large" />
+        </View>
+      );
+    }
+    return null;
+  };
+
   _getNotificationsArrays = () => {
     const { notifications, intl } = this.props;
 
@@ -117,31 +131,31 @@ class NotificationView extends PureComponent {
   };
 
   _getTimeListIndex = (timestamp) => {
-    if (isToday(timestamp)) {
-      return 0;
-    }
+    if (isToday(timestamp)) return 0;
 
-    if (isYesterday(timestamp)) {
-      return 1;
-    }
+    if (isYesterday(timestamp)) return 1;
 
-    if (isThisWeek(timestamp)) {
-      return 2;
-    }
+    if (isThisWeek(timestamp)) return 2;
 
-    if (isThisMonth(timestamp)) {
-      return 3;
-    }
+    if (isThisMonth(timestamp)) return 3;
 
     return 4;
   };
 
   render() {
-    const { readAllNotification, getActivities } = this.props;
+    const { readAllNotification, getActivities, loading } = this.props;
     const { filters, selectedFilter } = this.state;
 
     const _notifications = this._getNotificationsArrays();
 
+    if (_notifications.length === 0) {
+      return (
+        <View style={styles.loading}>
+          <ActivityIndicator animating size="large" />
+        </View>
+      );
+    }
+
     return (
       <View style={styles.container}>
         <FilterBar
@@ -157,7 +171,11 @@ class NotificationView extends PureComponent {
           onScroll={(e) => {
             let paddingToBottom = 1;
             paddingToBottom += e.nativeEvent.layoutMeasurement.height;
-            if (e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
+            if (
+              e.nativeEvent.contentOffset.y
+                >= e.nativeEvent.contentSize.height - paddingToBottom
+                && !loading
+            ) {
               getActivities(selectedFilter, true);
             }
           }}
@@ -176,6 +194,7 @@ class NotificationView extends PureComponent {
               </Fragment>
             )}
             keyExtractor={item => item.title}
+            ListFooterComponent={this._renderFooterLoading}
           />
         </ScrollView>
       </View>

src/screens/notification/container/notificationContainer.js

@@ -17,6 +17,7 @@ class NotificationContainer extends Component {
     this.state = {
       notifications: [],
       lastNotificationId: null,
+      notificationLoading: false,
     };
   }
 
@@ -33,12 +34,15 @@ class NotificationContainer extends Component {
     const { lastNotificationId, notifications } = this.state;
     const since = loadMore ? lastNotificationId : null;
 
+    this.setState({ notificationLoading: true });
+
     getActivities({ user: username, type, since }).then((res) => {
       const lastId = [...res].pop().id;
 
       this.setState({
         notifications: loadMore ? [...notifications, ...res] : res,
         lastNotificationId: lastId,
+        notificationLoading: false,
       });
     });
   };
@@ -87,7 +91,7 @@ class NotificationContainer extends Component {
   };
 
   render() {
-    const { notifications } = this.state;
+    const { notifications, notificationLoading } = this.state;
 
     return (
       <NotificationScreen
@@ -96,6 +100,7 @@ class NotificationContainer extends Component {
         navigateToNotificationRoute={this._navigateToNotificationRoute}
         readAllNotification={this._readAllNotification}
         handleLoginPress={this._handleOnPressLogin}
+        notificationLoading={notificationLoading}
         {...this.props}
       />
     );

src/screens/notification/screen/notificationScreen.js

@@ -29,6 +29,7 @@ class NotificationScreen extends PureComponent {
       readAllNotification,
       handleLoginPress,
       isLoggedIn,
+      notificationLoading,
     } = this.props;
     return (
       <View style={styles.container}>
@@ -51,6 +52,7 @@ class NotificationScreen extends PureComponent {
                 notifications={notifications}
                 navigateToNotificationRoute={navigateToNotificationRoute}
                 readAllNotification={readAllNotification}
+                loading={notificationLoading}
               />
             ) : (
               <NoPost