我使用React Native的ActivityIndicator创建一个简单的自定义组件，该组件使用布尔状态钩子来显示它。
然而，我想给它添加一些特殊的东西，那就是一个延迟计时器。例如，如果API调用花费了太长的时间，ActivityIndicator就会激活。另一方面，我不想让Activity Indicator显示API调用是否在延迟的时间跨度内执行。
我试着设置它，但它没有按预期工作。ActivityIndicator总是在setTimeout完成后出现，甚至在转换到另一个屏幕后也是如此。
这是我想到的

import { FC, useEffect, useState } from 'react';
import { View, ActivityIndicator, StyleSheet, Modal } from 'react-native';
import { globalPalette } from '../../../themes';

interface Props {
  visible: boolean;
}

export const LoadingSpinner: FC<Props> = ({ visible }) => {
  const [realVisible, setRealVisible] = useState(visible);

  useEffect(() => {
    if (visible) {
      // wait for 1s before showing the spinner

      setTimeout(() => {
        if (visible) {
          setRealVisible(true);
        }
      }, 1000);
    } else {
      setRealVisible(false);
    }
  }, [visible]);

  return (
    <>
      {realVisible ? (
        <Modal animationType="fade" transparent={true} visible={realVisible}>
          <View style={styles.loaderContainer}>
            <ActivityIndicator size="large" color={globalPalette.primary} />
          </View>
        </Modal>
      ) : (
        <></>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  loaderContainer: {
    position: 'absolute',
    top: '40%',
    left: '25%',
    backgroundColor: globalPalette.white,
    justifyContent: 'center',
    width: '50%',
    height: '20%',
    borderColor: globalPalette.primary,
    borderWidth: 1,
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.46,
    shadowRadius: 11.14,
    elevation: 17,
  },
});