diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/common/index.ts | 2 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 22 |
2 files changed, 22 insertions, 2 deletions
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'; diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 510d16fc..0f7e5cdd 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -22,7 +22,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'; @@ -36,6 +41,7 @@ import { ProfilePreviewType, ScreenType, SuggestedPeopleDataType, + BackgroundGradientType, } from '../../types'; import { fetchUserX, @@ -71,7 +77,16 @@ 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]); + const stausBarRef = useRef(hideStatusBar); + // loads data and append it to users based on current page useEffect(() => { loadMore(); @@ -299,6 +314,11 @@ const SuggestedPeopleScreen: React.FC = () => { return suggested_people_linked === 0 ? ( <SuggestedPeopleOnboardingStackScreen /> + ) : loading ? ( + <> + <TaggLoadingIndicator fullscreen /> + <Background gradientType={BackgroundGradientType.Dark} /> + </> ) : ( <> <FlatList |