friens screen fixes

src/screens/InAppScreens/ProfileScreen/MyFriendsScreen/FriendsProfile/index.tsx

@@ -24,6 +24,7 @@ import NMIcon from 'assets/icons/nm_icon.svg';
 import PremiumIcon from 'assets/icons/premium.svg';
 
 import { styles } from '../../Components/styles';
+import { ActivityIndicator } from 'react-native-paper';
 
 type Props = {
   avatar: string | null;
@@ -53,6 +54,7 @@ type Props = {
   hideRequest: (id: number) => void;
   friendDbId: number;
   status: number;
+  loadingStatus: string | null;
 };
 
 export const FriendsProfile: FC<Props> = ({
@@ -78,7 +80,8 @@ export const FriendsProfile: FC<Props> = ({
   updateFriendStatus,
   hideRequest,
   friendDbId,
-  status
+  status,
+  loadingStatus
 }) => {
   const navigation = useNavigation();
 
@@ -104,21 +107,37 @@ export const FriendsProfile: FC<Props> = ({
                   borderColor: status === 3 ? Colors.RED : Colors.TEXT_GRAY,
                   paddingVertical: 6,
                   paddingHorizontal: 10
-                }
+                },
+                loadingStatus === `4-${friendDbId}` || loadingStatus === `${friendDbId}`
+                  ? { opacity: 0.6 }
+                  : {}
               ]}
               onPress={() =>
                 status === 3 ? updateFriendStatus(4, friendDbId) : hideRequest(friendDbId)
               }
+              disabled={
+                status === 3
+                  ? loadingStatus === `4-${friendDbId}`
+                  : loadingStatus === `${friendDbId}`
+              }
             >
-              <Text
-                style={{
-                  fontSize: getFontSize(10),
-                  fontFamily: 'redhat-600',
-                  color: status === 3 ? Colors.RED : Colors.TEXT_GRAY
-                }}
-              >
-                {status === 3 ? 'Cancel' : 'Hide'}
-              </Text>
+              {loadingStatus === `4-${friendDbId}` || loadingStatus === `${friendDbId}` ? (
+                <ActivityIndicator
+                  size={13}
+                  color={status === 3 ? Colors.RED : Colors.TEXT_GRAY}
+                  style={{ paddingHorizontal: 6 }}
+                />
+              ) : (
+                <Text
+                  style={{
+                    fontSize: getFontSize(10),
+                    fontFamily: 'redhat-600',
+                    color: status === 3 ? Colors.RED : Colors.TEXT_GRAY
+                  }}
+                >
+                  {status === 3 ? 'Cancel' : 'Hide'}
+                </Text>
+              )}
             </TouchableOpacity>
           </View>
         );
@@ -136,20 +155,30 @@ export const FriendsProfile: FC<Props> = ({
                       borderColor: Colors.ORANGE,
                       paddingVertical: 6,
                       paddingHorizontal: 10
-                    }
+                    },
+                    loadingStatus === `1-${friendDbId}` ? { opacity: 0.6 } : {}
                   ]}
                   onPress={() => updateFriendStatus(1, friendDbId)}
+                  disabled={loadingStatus === `1-${friendDbId}`}
                 >
-                  <Text
-                    style={[
-                      styles.statusTextSmall,
-                      {
-                        color: Colors.ORANGE
-                      }
-                    ]}
-                  >
-                    Approve
-                  </Text>
+                  {loadingStatus === `1-${friendDbId}` ? (
+                    <ActivityIndicator
+                      size={13}
+                      color={Colors.ORANGE}
+                      style={{ paddingHorizontal: 12 }}
+                    />
+                  ) : (
+                    <Text
+                      style={[
+                        styles.statusTextSmall,
+                        {
+                          color: Colors.ORANGE
+                        }
+                      ]}
+                    >
+                      Approve
+                    </Text>
+                  )}
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={[
@@ -159,20 +188,30 @@ export const FriendsProfile: FC<Props> = ({
                       borderColor: Colors.RED,
                       paddingVertical: 6,
                       paddingHorizontal: 10
-                    }
+                    },
+                    loadingStatus === `2-${friendDbId}` ? { opacity: 0.6 } : {}
                   ]}
                   onPress={() => updateFriendStatus(2, friendDbId)}
+                  disabled={loadingStatus === `2-${friendDbId}`}
                 >
-                  <Text
-                    style={[
-                      styles.statusTextSmall,
-                      {
-                        color: Colors.RED
-                      }
-                    ]}
-                  >
-                    Deny
-                  </Text>
+                  {loadingStatus === `2-${friendDbId}` ? (
+                    <ActivityIndicator
+                      size={13}
+                      color={Colors.RED}
+                      style={{ paddingHorizontal: 6 }}
+                    />
+                  ) : (
+                    <Text
+                      style={[
+                        styles.statusTextSmall,
+                        {
+                          color: Colors.RED
+                        }
+                      ]}
+                    >
+                      Deny
+                    </Text>
+                  )}
                 </TouchableOpacity>
               </>
             ) : (

src/screens/InAppScreens/ProfileScreen/MyFriendsScreen/index.tsx

@@ -43,6 +43,7 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
   const [maxPages, setMaxPages] = useState(1);
   const [page, setPage] = useState(0);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState<string | null>(null);
   const [filter, setFilter] = useState<{
     age: number | undefined;
     ranking: string | undefined;
@@ -103,7 +104,11 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
 
   useFocusEffect(
     useCallback(() => {
+      setPage(0);
       fetchUsers();
+      if (flashListRef && flashListRef.current) {
+        flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
+      }
     }, [])
   );
 
@@ -218,11 +223,16 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
   }, [users, page]);
 
   const handleUpdateFriendStatus = async (status: number, id: number) => {
+    setLoadingStatus(`${status}-${id}`);
     await updateFriendStatus(
       { token, id, status },
       {
         onSuccess: () => {
           applySort();
+          setLoadingStatus(null);
+        },
+        onError: () => {
+          setLoadingStatus(null);
         }
       }
     );
@@ -230,11 +240,16 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
   };
 
   const handleHideRequest = async (id: number) => {
+    setLoadingStatus(`${id}`);
     await hideShowRequest(
       { token, id, show: 0 },
       {
         onSuccess: () => {
           applySort();
+          setLoadingStatus(null);
+        },
+        onError: () => {
+          setLoadingStatus(null);
         }
       }
     );
@@ -316,6 +331,7 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
                   status={item.friend_status}
                   friendDbId={item.friend_db_id}
                   hideRequest={handleHideRequest}
+                  loadingStatus={loadingStatus}
                 />
               )}
               keyExtractor={(item) => item.user_id.toString()}