import React from 'react';
import {useIsMutating, useIsFetching} from 'react-query';
import {ActivityIndicator} from 'react-native';
import useLoaderContext from '@contexts/loader';
import {Container} from '@styles/components/loader';

const Loader = () => {
  const {loader} = useLoaderContext();
  const isMutating = useIsMutating();
  const isFetching = useIsFetching();

  const animating = !!isMutating || !!isFetching || loader?.animating;

  if (!animating) {
    return null;
  }

  return (
    <Container>
      <ActivityIndicator
        animating={true}
        size="large"
        color="#FFFFFF"
        testID="lodr"
      />
    </Container>
  );
};
export default Loader;