isLoading relation with React native navigation context

import { useQuery } from "@tanstack/react-query";
import { getAppointments } from "../api/api";

export const useGetAppointments = () => {
return useQuery({
queryKey: ["getAppointments"],
queryFn: getAppointments,
retry: 3,
retryDelay: 3000
})
};

export default function UpcomingAppointments() {
const getAppointmentsQuery = useGetAppointments();
....
return (
{getAppointmentsQuery.isLoading || loading ? (
<ActivityIndicator size={"large"} color={theme.colors.primary} />
) : (
mainComponent()
)});