From 6083aa78b0b2b7c8b5a9a79381f68297bdb2e189 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Fri, 26 Feb 2021 17:58:08 -0500
Subject: Add loading indicator for when SP are loading

---
 .../suggestedPeople/SuggestedPeopleScreen.tsx        | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index c2aab1b5..1844f6ee 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -21,7 +21,12 @@ import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {TabsGradient, TaggsBar} from '../../components';
+import {
+  TabsGradient,
+  TaggsBar,
+  TaggLoadingIndicator,
+  Background,
+} from '../../components';
 import {MutualFriends} from '../../components/suggestedPeople';
 import {SP_PAGE_SIZE} from '../../constants';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
@@ -35,6 +40,7 @@ import {
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
+  BackgroundGradientType,
 } from '../../types';
 import {
   fetchUserX,
@@ -70,6 +76,13 @@ const SuggestedPeopleScreen: React.FC = () => {
   const [refreshing, setRefreshing] = useState(false);
   const [shouldResetData, setShouldResetData] = useState(false);
   const [hideStatusBar, setHideStatusBar] = useState(false);
+  // boolean for showing/hiding loading indicator
+  const [loading, setLoading] = useState(true);
+
+  // set loading to false once there are people to display
+  useEffect(() => {
+    people.length ? setLoading(false) : setLoading(true);
+  }, [people]);
 
   // loads data and append it to users based on current page
   useEffect(() => {
@@ -291,6 +304,11 @@ const SuggestedPeopleScreen: React.FC = () => {
 
   return suggested_people_linked === 0 ? (
     <SuggestedPeopleOnboardingStackScreen />
+  ) : loading ? (
+    <>
+      <TaggLoadingIndicator fullscreen />
+      <Background gradientType={BackgroundGradientType.Dark} />
+    </>
   ) : (
     <>
       <FlatList
-- 
cgit v1.2.3-70-g09d2