<commit_before>import React, { useState } from 'react';
import styled from 'styled-components';
import { CSSTransition } from 'react-transition-group';

const timeout = 250;

const Img = styled.img`
    opacity: 0;
    transition: opacity ${timeout}ms ease-in-out;

    &.fadein-img-enter,
    &.fadein-img-exit,
    &.fadein-img-exit-active {
        opacity: 0;
    }

    &.fadein-img-enter-done,
    &.fadein-img-enter-active {
        opacity: 1;
    }
`;

const FadeInImage = props => {
    const [loaded, setLoaded] = useState(false);

    return (
        <CSSTransition in={loaded} timeout={timeout} classNames="fadein-img">
            {() => (
                <Img
                    {...props}
                    alt={props.alt}
                    onLoad={() => {
                        setLoaded(true);
                    }}
                />
            )}
        </CSSTransition>
    );
};

export default FadeInImage;
<commit_msg>bug/fixProfileImg<commit_after>import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { CSSTransition } from 'react-transition-group';

const timeout = 250;

const Img = styled.img`
    opacity: 0;
    transition: opacity ${timeout}ms ease-in-out;

    &.fadein-img-enter,
    &.fadein-img-exit,
    &.fadein-img-exit-active {
        opacity: 0;
    }

    &.fadein-img-enter-done,
    &.fadein-img-enter-active {
        opacity: 1;
    }
`;

const FadeInImage = props => {
    const imageRef = useRef(null);
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        if (imageRef.current.complete) {
            setLoaded(true);
        }
    }, []);

    return (
        <CSSTransition in={loaded} timeout={timeout} classNames="fadein-img">
            {() => (
                <Img
                    ref={imageRef}
                    {...props}
                    alt={props.alt}
                    onLoad={() => {
                        setLoaded(true);
                    }}
                />
            )}
        </CSSTransition>
    );
};

export default FadeInImage;

{'fraction_non_alphanumeric': 0.141438032166509, 'fraction_numerical': 0.005676442762535478, 'mean_word_length': 1.64375, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 16, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5507838', 'n_tokens_mistral': 689, 'n_tokens_neox': 640, 'n_words': 120}