Add loading indicator for when SP are loading

1 files changed, 19 insertions, 1 deletions

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