refactor: Use networkStatus to show different loading states

Author: Sanjeev Yadav

src/App.tsx

@@ -29,7 +29,7 @@ const App = (): React.ReactElement => {
   }
 
   // TODO: SplashScreen logic
-  return <ActivityIndicator size="large" />;
+  return <ActivityIndicator color="black" size="large" />;
 };
 
 export default App;

src/logic/products/useCategoryProducts.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useQuery, ApolloError } from '@apollo/client';
+import { useQuery, ApolloError, NetworkStatus } from '@apollo/client';
 import {
   GET_CATGEORY_PRODUCTS,
   GetCategoryProductsVars,
@@ -13,17 +13,16 @@ interface Props {
 
 interface Result {
   data: CategoryProductsDataType | undefined;
-  loading: boolean;
+  networkStatus: NetworkStatus;
   error: ApolloError | undefined;
-  currentPage: number;
   refresh(): void;
   loadMore(): void;
 }
 
 export const useCategoryProducts = ({ categoryId: id }: Props): Result => {
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const { refetch, data, loading, error, fetchMore } = useQuery<
+  const { refetch, loading, data, error, fetchMore, networkStatus } = useQuery<
     CategoryProductsDataType,
     GetCategoryProductsVars
   >(GET_CATGEORY_PRODUCTS, {
@@ -32,6 +31,7 @@ export const useCategoryProducts = ({ categoryId: id }: Props): Result => {
       pageSize: LIMITS.categoryProductsPageSize,
       currentPage: 1,
     },
+    notifyOnNetworkStatusChange: true,
   });
 
   useEffect(() => {
@@ -65,9 +65,8 @@ export const useCategoryProducts = ({ categoryId: id }: Props): Result => {
 
   return {
     data,
-    loading,
+    networkStatus,
     error,
-    currentPage,
     refresh,
     loadMore,
   };

src/logic/products/useSearch.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useLazyQuery } from '@apollo/client';
+import { NetworkStatus, useLazyQuery } from '@apollo/client';
 import {
   GetSearchProductsVars,
   GET_SEARCH_PRODUCTS,
@@ -9,7 +9,7 @@ import { LIMITS } from '../../constants';
 
 interface Result {
   data: SearchProductsDataType | undefined;
-  loading: boolean;
+  networkStatus: NetworkStatus;
   called: boolean;
   searchText: string;
   handleChange(arg1: string): void;
@@ -22,9 +22,12 @@ export const useSearch = (): Result => {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [
     getSearchProducts,
-    { called, loading, error, fetchMore, data },
+    { called, loading, error, networkStatus, fetchMore, data },
   ] = useLazyQuery<SearchProductsDataType, GetSearchProductsVars>(
     GET_SEARCH_PRODUCTS,
+    {
+      notifyOnNetworkStatusChange: true,
+    },
   );
 
   useEffect(() => {
@@ -74,7 +77,7 @@ export const useSearch = (): Result => {
 
   return {
     data,
-    loading,
+    networkStatus,
     called,
     searchText,
     loadMore,

src/screens/HomeScreen/FeaturedProductList.tsx

@@ -4,9 +4,10 @@ import { ActivityIndicator, View, FlatList, StyleSheet } from 'react-native';
 import { Text } from 'react-native-elements';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
 import { ProductListItem } from '../../components';
-import { SPACING } from '../../constants';
+import { DIMENS, SPACING } from '../../constants';
 import { useCategoryProducts } from '../../logic';
 import { Routes } from '../../navigation';
+import { NetworkStatus } from '@apollo/client';
 
 type Props = {
   name?: string;
@@ -17,7 +18,7 @@ const FeaturedProductList = ({
   name,
   categoryId,
 }: Props): React.ReactElement => {
-  const { data, loading, error } = useCategoryProducts({ categoryId });
+  const { data, networkStatus, error } = useCategoryProducts({ categoryId });
   const navigation = useNavigation();
 
   const onProductItemClicked = (index: number) => {
@@ -54,8 +55,13 @@ const FeaturedProductList = ({
     );
   }
 
-  if (loading) {
-    return <ActivityIndicator size="large" />;
+  // TODO: Remove hard-coded values
+  if (networkStatus === NetworkStatus.loading) {
+    return (
+      <View style={styles.loadingBox}>
+        <ActivityIndicator color="black" size="large" />
+      </View>
+    );
   }
 
   return (
@@ -87,6 +93,14 @@ const styles = StyleSheet.create({
     paddingVertical: SPACING.small,
     fontSize: 16,
   },
+  loadingBox: {
+    alignContent: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    backgroundColor: '#fff',
+    marginBottom: SPACING.large,
+    height: (DIMENS.common.WINDOW_WIDTH / 3) * 2, // This is linked to ProductListItem height
+  },
 });
 
 export default FeaturedProductList;

src/screens/ProductListScreen/ProductListScreen.tsx

@@ -13,6 +13,7 @@ import { Routes, AppStackParamList } from '../../navigation';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
 import { SPACING } from '../../constants';
 import { GenericTemplate, ProductListItem } from '../../components';
+import { NetworkStatus } from '@apollo/client';
 
 interface Props {
   navigation: StackNavigationProp<
@@ -28,16 +29,11 @@ const ProductListScreen = ({
     params: { categoryId },
   },
 }: Props): React.ReactElement => {
-  const {
-    data,
-    loading,
-    currentPage,
-    error,
-    refresh,
-    loadMore,
-  } = useCategoryProducts({
-    categoryId,
-  });
+  const { data, networkStatus, error, refresh, loadMore } = useCategoryProducts(
+    {
+      categoryId,
+    },
+  );
 
   const onProductItemClicked = (index: number) => {
     if (data?.products?.items) {
@@ -64,10 +60,11 @@ const ProductListScreen = ({
     );
   };
 
+  // TODO: remove hard-coded values
   const renderFooterComponent = () =>
-    (loading && data?.products?.items?.length !== 0 && (
+    (networkStatus === NetworkStatus.fetchMore && (
       <View style={styles.footerContainer}>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator color="black" size="large" />
       </View>
     )) || <></>;
 
@@ -80,7 +77,10 @@ const ProductListScreen = ({
         keyExtractor={item => `productListItem${item.sku}`}
         refreshControl={
           <RefreshControl
-            refreshing={loading && currentPage === 1}
+            refreshing={
+              networkStatus === NetworkStatus.refetch ||
+              networkStatus === NetworkStatus.loading
+            }
             onRefresh={refresh}
           />
         }

src/screens/SearchScreen/SearchScreen.tsx

@@ -8,6 +8,7 @@ import { AppStackParamList, Routes } from '../../navigation';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
 import { translate } from '../../i18n';
 import { LIMITS, SPACING } from '../../constants';
+import { NetworkStatus } from '@apollo/client';
 
 type Props = {
   navigation: StackNavigationProp<
@@ -20,7 +21,7 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
   const {
     searchText,
     handleChange,
-    loading,
+    networkStatus,
     called,
     loadMore,
     data: { products: { items: products = [] } = {} } = {},
@@ -57,18 +58,19 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
     (searchText.length >= LIMITS.searchTextMinLength &&
       products.length === 0 &&
       called &&
-      !loading && (
+      networkStatus !== NetworkStatus.loading && (
         <View style={styles.center}>
           <Text>
             {translate('searchScreen.noProductsFound', { searchText })}
           </Text>
         </View>
       )) || <></>;
 
+  // TODO: Remove hard-coded values
   const renderFooterComponent = () =>
-    (loading && products.length !== 0 && (
+    (networkStatus === NetworkStatus.fetchMore && (
       <View style={styles.footerContainer}>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator color="black" size="large" />
       </View>
     )) || <></>;
 
@@ -78,7 +80,7 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
         placeholder={translate('searchScreen.searchBarHint')}
         onChangeText={handleChange}
         value={searchText}
-        showLoading={loading}
+        showLoading={networkStatus === NetworkStatus.loading}
         searchIcon={{
           name: 'arrow-back',
           onPress: handleBackPress,