{"size": 1465, "ext": "js", "max_stars_repo_path": "src/components/loading-indicators/loading-repository-list-item.component.js", "max_stars_repo_name": "MianJawadAhmad/git-point", "max_stars_repo_stars_event_min_datetime": "2017-07-11T16:07:02.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-15T09:13:36.000Z", "max_issues_repo_path": "src/components/loading-indicators/loading-repository-list-item.component.js", "max_issues_repo_name": "MianJawadAhmad/git-point", "max_issues_repo_issues_event_min_datetime": "2017-07-11T20:43:02.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-15T19:15:48.000Z", "max_forks_repo_path": "src/components/loading-indicators/loading-repository-list-item.component.js", "max_forks_repo_name": "MianJawadAhmad/git-point", "max_forks_repo_forks_event_min_datetime": "2017-07-11T21:04:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-27T15:13:50.000Z"}
{"max_stars_count": 5049, "max_issues_count": 804, "max_forks_count": 1226, "avg_line_length": 21.5441176471, "max_line_length": 72, "alphanum_fraction": 0.6552901024}
import React, { Component } from 'react';
import { Animated } from 'react-native';
import styled from 'styled-components';

import { colors } from 'config';
import { loadingAnimation } from 'utils';

const Container = styled.View`
  padding-top: 20;
  padding-right: 20;
  padding-bottom: 20;
  height: 100;
  border-bottom-color: #ededed;
  border-bottom-width: 1;
  background-color: transparent;
`;

const Wrapper = styled.View`
  flex: 1;
  flex-direction: column;
  margin-left: 10;
`;

const TextBarTitle = styled(Animated.View)`
  height: 7;
  width: 100;
  background-color: ${colors.greyDarkest};
  margin-bottom: 10;
`;

const TextBarLine1 = styled(Animated.View)`
  height: 7;
  width: 250;
  background-color: ${colors.grey};
  margin-bottom: 10;
`;

const TextBarLine2 = styled(Animated.View)`
  height: 7;
  width: 80;
  background-color: ${colors.grey};
`;

export class LoadingRepositoryListItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnimValue: new Animated.Value(0),
    };
  }

  componentDidMount() {
    loadingAnimation(this.state.fadeAnimValue).start();
  }

  render() {
    return (
      <Container>
        <Wrapper>
          <TextBarTitle style={{ opacity: this.state.fadeAnimValue }} />
          <TextBarLine1 style={{ opacity: this.state.fadeAnimValue }} />
          <TextBarLine2 style={{ opacity: this.state.fadeAnimValue }} />
        </Wrapper>
      </Container>
    );
  }
}
