How to use the react-components.useLoading function in react-components

const ImportCsvModalContent = ({ file, onSetVcardContacts }) => {
    const { createNotification } = useNotifications();

    const [isParsingFile, withParsing] = useLoading(true);
    const [contactIndex, setContactIndex] = useState(0);
    const [preVcardsContacts, setPreVcardsContacts] = useState([]);

    const handleClickPrevious = () => setContactIndex((index) => index - 1);
    const handleClickNext = () => setContactIndex((index) => index + 1);

    const handleToggle = (groupIndex) => (index) => {
        if (preVcardsContacts[0][groupIndex][index].combineInto === 'fn-main') {
            // do not allow to uncheck first name and last name simultaneously
            const preVcards = preVcardsContacts[0][groupIndex];
            const firstNameIndex = preVcards.findIndex(({ header }) => header.toLowerCase() === 'first name');
            const lastNameIndex = preVcards.findIndex(({ header }) => header.toLowerCase() === 'last name');
            const isFirstNameChecked = firstNameIndex !== -1 && preVcards[firstNameIndex].checked;
            const isLastNameChecked = lastNameIndex !== -1 && preVcards[lastNameIndex].checked;

            if ((!isFirstNameChecked && index === lastNameIndex) || (!isLastNameChecked && index === firstNameIndex)) {

const MergingModalContent = ({
    contactID,
    userKeysList,
    alreadyMerged,
    beMergedModel = {},
    beDeletedModel = {},
    totalBeMerged = 0,
    onFinish,
    history,
    location
}) => {
    const api = useApi();
    const { privateKeys, publicKeys } = useMemo(() => splitKeys(userKeysList), []);

    const [loading, withLoading] = useLoading(true);
    const [model, setModel] = useState({
        mergedAndEncrypted: [],
        failedOnMergeAndEncrypt: [],
        submitted: [],
        failedOnSubmit: []
    });

    useEffect(() => {
        // Prepare api for allowing cancellation in the middle of the merge
        const abortController = new AbortController();
        const apiWithAbort = (config) => api({ ...config, signal: abortController.signal });

        /**
         * Get a contact from its ID and decrypt it. Return contact as a list of properties
         */
        const getDecryptedContact = async (ID, { signal }) => {

const ContactImageSummary = ({ photo, name }) => {
    const [showAnyways, setShowAnyways] = useState(!isURL(photo));
    const [image, setImage] = useState({ src: photo });
    const [{ ShowImages }, loadingMailSettings] = useMailSettings();
    const [loadingResize, withLoadingResize] = useLoading(true);
    const loading = loadingMailSettings || loadingResize;
    const showPhoto = ShowImages & SHOW_IMAGES.REMOTE || showAnyways;

    useEffect(() => {
        if (!photo || !showPhoto) {
            return;
        }
        const resize = async () => {
            const { src, width, height } = await toImage(photo);

            if (width <= CONTACT_IMG_SIZE && height <= CONTACT_IMG_SIZE) {
                return setImage({ src, width, height, isSmall: true });
            }
            const resized = await resizeImage({
                original: photo,
                maxWidth: CONTACT_IMG_SIZE,

const ContactDetails = ({ contactID, userKeysList, hasPaidMail, ...rest }) => {
    const api = useApi();
    const [loading, withLoading] = useLoading(true);
    const [model, setModel] = useState({ properties: [], errors: [] });

    useEffect(() => {
        const request = async () => {
            const { Contact } = await api(getContact(contactID));
            const { properties, errors } = await prepareContact(Contact, splitKeys(userKeysList));
            setModel({ properties, errors });
        };

        try {
            withLoading(request());
        } catch (error) {
            setModel({ ...model, errors: [FAIL_TO_LOAD] });
        }
    }, []);

const MergeContactPreview = ({
    contactID,
    userKeysList,
    hasPaidMail,
    beMergedModel,
    beDeletedModel,
    updateModel,
    ...rest
}) => {
    const { call } = useEventManager();
    const api = useApi();
    const { privateKeys, publicKeys } = useMemo(() => splitKeys(userKeysList), []);

    const [loading, withLoading] = useLoading(true);
    const [isMerging, setIsMerging] = useState(false);
    const [mergeFinished, setMergeFinished] = useState(false);
    const [model, setModel] = useState({});

    const [beMergedIDs] = Object.values(beMergedModel);
    const beDeletedIDs = Object.keys(beDeletedModel);

    const handleRemoveMerged = () => {
        const beRemovedIDs = beMergedIDs.slice(1).concat(beDeletedIDs);
        updateModel((model) => ({
            ...model,
            orderedContacts: model.orderedContacts
                .map((group) => group.filter(({ ID }) => !beRemovedIDs.includes(ID)))
                .filter((group) => group.length > 1)
        }));
    };