<commit_before>import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import PropTypes from 'prop-types';

import { getClaimLetters } from '../actions';
import ClaimsBreadcrumbs from '../components/ClaimsBreadcrumbs';
import ClaimLetterList from '../components/ClaimLetterList';
import WIP from '../components/WIP';
import { isLoadingFeatures, showClaimLettersFeature } from '../selectors';

export const YourClaimLetters = ({ isLoading, showClaimLetters }) => {
  const [letters, setLetters] = useState([]);

  useEffect(() => {
    getClaimLetters().then(data => {
      setLetters(data);
    });
  }, []);

  if (isLoading) {
    return <va-loading-indicator message="Loading application..." />;
  }

  let content;

  if (showClaimLetters) {
    content = (
      <>
        <h1>Your VA claim letters</h1>
        <div className="vads-u-font-size--lg vads-u-padding-bottom--1">
          We send you letters to update you on the status of your claims,
          appeals, and decision reviews. Download your claim letters on this
          page.
        </div>
        <ClaimLetterList letters={letters} />
      </>
    );
  } else {
    content = <WIP />;
  }

  return (
    <article id="claim-letters" className="row vads-u-margin-bottom--5">
      <div className="usa-width-two-thirds medium-8 columns">
        <ClaimsBreadcrumbs>
          <Link to="your-claim-letters" key="your-claim-letters">
            Your VA claim letters
          </Link>
        </ClaimsBreadcrumbs>
        {content}
      </div>
    </article>
  );
};

const mapStateToProps = state => ({
  isLoading: isLoadingFeatures(state),
  showClaimLetters: showClaimLettersFeature(state),
});<commit_msg>Adding loading indicator while letters are loading (#22468)<commit_after>import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import PropTypes from 'prop-types';

import { getClaimLetters } from '../actions';
import ClaimsBreadcrumbs from '../components/ClaimsBreadcrumbs';
import ClaimLetterList from '../components/ClaimLetterList';
import WIP from '../components/WIP';
import { isLoadingFeatures, showClaimLettersFeature } from '../selectors';

export const YourClaimLetters = ({ isLoading, showClaimLetters }) => {
  const [letters, setLetters] = useState([]);
  const [lettersLoading, setLettersLoading] = useState(true);

  useEffect(() => {
    getClaimLetters().then(data => {
      setLetters(data);
      setLettersLoading(false);
    });
  }, []);

  if (isLoading) {
    return <va-loading-indicator message="Loading application..." />;
  }

  let content;

  if (showClaimLetters) {
    content = (
      <>
        <h1>Your VA claim letters</h1>
        <div className="vads-u-font-size--lg vads-u-padding-bottom--1">
          We send you letters to update you on the status of your claims,
          appeals, and decision reviews. Download your claim letters on this
          page.
        </div>
        {lettersLoading ? (
          <va-loading-indicator message="Loading your claim letters..." />
        ) : (
          <ClaimLetterList letters={letters} />
        )}
      </>
    );
  } else {
    content = <WIP />;
  }

  return (
    <article id="claim-letters" className="row vads-u-margin-bottom--5">
      <div className="usa-width-two-thirds medium-8 columns">
        <ClaimsBreadcrumbs>
          <Link to="your-claim-letters" key="your-claim-letters">
            Your VA claim letters
          </Link>
        </ClaimsBreadcrumbs>
        {content}
      </div>
    </article>
  );
};

const mapStateToProps = state => ({
  isLoading: isLoadingFeatures(state),
  showClaimLetters: showClaimLettersFeature(state),
});
{'fraction_non_alphanumeric': 0.14006342494714588, 'fraction_numerical': 0.003964059196617336, 'mean_word_length': 2.882051282051282, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4507594', 'n_tokens_mistral': 1149, 'n_tokens_neox': 1118, 'n_words': 274}