<commit_before>/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow strict-local
 */

import type {Node} from 'React';
import {ActivityIndicator, StyleSheet, View} from 'react-native';
import React, {Component} from 'react';

type State = {|animating: boolean|};
type Props = $ReadOnly<{||}>;
type Timer = TimeoutID;

class ToggleAnimatingActivityIndicator extends Component<Props, State> {
  _timer: Timer;

  constructor(props: Props) {
    super(props);
    this.state = {
      animating: true,
    };
  }

  componentDidMount() {
    this.setToggleTimeout();
  }

  componentWillUnmount() {
    clearTimeout(this._timer);
  }

  setToggleTimeout() {
    this._timer = setTimeout(() => {
      this.setState({animating: !this.state.animating});
      this.setToggleTimeout();
    }, 2000);
  }

  render(): Node {
    return (
      <ActivityIndicator
        animating={this.state.animating}
        style={[styles.centering, {height: 80}]}
        size="large"
      />
    );
  }
}

const styles = StyleSheet.create({
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
  gray: {
    backgroundColor: '#cccccc',
  },
  horizontal: {<commit_msg>refactor(rn tester app): change activity indicator to hooks (#35071)<commit_after>/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow strict-local
 */

import type {Node} from 'React';
import {ActivityIndicator, StyleSheet, View} from 'react-native';
import React, {useState, useCallback, useRef, useEffect} from 'react';

function ToggleAnimatingActivityIndicator() {
  const timer = useRef();

  const [animating, setAnimating] = useState(true);

  const setToggleTimeout = useCallback(() => {
    timer.current = setTimeout(() => {
      setAnimating(currentState => !currentState);
      setToggleTimeout();
    }, 2000);
  }, []);

  useEffect(() => {
    setToggleTimeout();

    return () => {
      clearTimeout(timer.current);
    };
  }, [timer, setToggleTimeout]);

  return (
    <ActivityIndicator
      animating={animating}
      style={[styles.centering, {height: 80}]}
      size="large"
    />
  );
}

const styles = StyleSheet.create({
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
  gray: {
    backgroundColor: '#cccccc',
  },
  horizontal: {
{'fraction_non_alphanumeric': 0.13996175908221797, 'fraction_numerical': 0.007265774378585086, 'mean_word_length': 3.389261744966443, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 13, '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': '3230891', 'n_tokens_mistral': 810, 'n_tokens_neox': 794, 'n_words': 211}