{"size": 1368, "ext": "js", "max_stars_repo_path": "components/Loading.js", "max_stars_repo_name": "jonasbbernardi/moneictrl", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/Loading.js", "max_issues_repo_name": "jonasbbernardi/moneictrl", "max_issues_repo_issues_event_min_datetime": "2022-02-27T11:31:56.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T11:31:56.000Z", "max_forks_repo_path": "components/Loading.js", "max_forks_repo_name": "jonasbbernardi/moneictrl", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 28.5, "max_line_length": 76, "alphanum_fraction": 0.5533625731}
import React, { useEffect, useRef, useState } from 'react';
import { Animated, Easing } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faSpinner, faDollarSign } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import colors from '../styles/colors';

library.add( faSpinner, faDollarSign );

const Loading = (props) => {
    const size = props.size ?? 20;
    const color = props.color ?? colors.black;
    
    const rotateVal = useRef(new Animated.Value(0)).current;

    const rotateInput = rotateVal.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    });

    useEffect(() => { load() }, []);

    const load = () => {
        Animated.loop(
            Animated.timing(rotateVal, {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear,
                useNativeDriver: true
            })
        ).start();
    }

    return(
        <Animated.View style={{
            ...props.style,
            height: size,
            width: size,
            transform: [{rotate: rotateInput}], }}>
            <FontAwesomeIcon
                color={color}
                size={size}
                icon='dollar-sign' />
        </Animated.View>
    );
}

export default Loading;