From d33382603f4122147f6d1c715056446936a39c1b Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Fri, 26 Feb 2021 17:26:43 -0500
Subject: Fix export naming typo

---
 src/components/common/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 95854ba8..e1543cd8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -15,7 +15,7 @@ export {default as ComingSoon} from './ComingSoon';
 export {default as PostCarousel} from './PostCarousel';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as BottomDrawer} from './BottomDrawer';
-export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
+export {default as TaggLoadingIndicator} from './TaggLoadingIndicator';
 export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
-- 
cgit v1.2.3-70-g09d2


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