~cytrogen/masto-fe

a86886b1fdc927ed51810fb6b43a0458bedf1cbb — alfe 2 years ago 72590e6
Rewrite `<LoadingIndicator/>` as FC and TS  (#25364)

A app/javascript/mastodon/components/circular_progress.tsx => app/javascript/mastodon/components/circular_progress.tsx +27 -0
@@ 0,0 1,27 @@
interface Props {
  size: number;
  strokeWidth: number;
}

export const CircularProgress: React.FC<Props> = ({ size, strokeWidth }) => {
  const viewBox = `0 0 ${size} ${size}`;
  const radius = (size - strokeWidth) / 2;

  return (
    <svg
      width={size}
      height={size}
      viewBox={viewBox}
      className='circular-progress'
      role='progressbar'
    >
      <circle
        fill='none'
        cx={size / 2}
        cy={size / 2}
        r={radius}
        strokeWidth={`${strokeWidth}px`}
      />
    </svg>
  );
};

M app/javascript/mastodon/components/dropdown_menu.jsx => app/javascript/mastodon/components/dropdown_menu.jsx +1 -2
@@ 8,8 8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { supportsPassiveEvents } from 'detect-passive-events';
import Overlay from 'react-overlays/Overlay';

import { CircularProgress } from 'mastodon/components/loading_indicator';

import { CircularProgress } from "./circular_progress";
import { IconButton } from './icon_button';

const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;

D app/javascript/mastodon/components/loading_indicator.jsx => app/javascript/mastodon/components/loading_indicator.jsx +0 -31
@@ 1,31 0,0 @@
import PropTypes from 'prop-types';

export const CircularProgress = ({ size, strokeWidth }) => {
  const viewBox = `0 0 ${size} ${size}`;
  const radius  = (size - strokeWidth) / 2;

  return (
    <svg width={size} height={size} viewBox={viewBox} className='circular-progress' role='progressbar'>
      <circle
        fill='none'
        cx={size / 2}
        cy={size / 2}
        r={radius}
        strokeWidth={`${strokeWidth}px`}
      />
    </svg>
  );
};

CircularProgress.propTypes = {
  size: PropTypes.number.isRequired,
  strokeWidth: PropTypes.number.isRequired,
};

const LoadingIndicator = () => (
  <div className='loading-indicator'>
    <CircularProgress size={50} strokeWidth={6} />
  </div>
);

export default LoadingIndicator;

A app/javascript/mastodon/components/loading_indicator.tsx => app/javascript/mastodon/components/loading_indicator.tsx +7 -0
@@ 0,0 1,7 @@
import { CircularProgress } from './circular_progress';

export const LoadingIndicator: React.FC = () => (
  <div className='loading-indicator'>
    <CircularProgress size={50} strokeWidth={6} />
  </div>
);

M app/javascript/mastodon/components/scrollable_list.jsx => app/javascript/mastodon/components/scrollable_list.jsx +1 -1
@@ 17,7 17,7 @@ import IntersectionObserverWrapper from '../features/ui/util/intersection_observ

import { LoadMore } from './load_more';
import { LoadPending } from './load_pending';
import LoadingIndicator from './loading_indicator';
import { LoadingIndicator } from './loading_indicator';

const MOUSE_IDLE_DELAY = 300;


M app/javascript/mastodon/features/account_gallery/index.jsx => app/javascript/mastodon/features/account_gallery/index.jsx +1 -1
@@ 10,7 10,7 @@ import { lookupAccount, fetchAccount } from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
import ColumnBackButton from 'mastodon/components/column_back_button';
import { LoadMore } from 'mastodon/components/load_more';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollContainer from 'mastodon/containers/scroll_container';
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
import { normalizeForLookup } from 'mastodon/reducers/accounts_map';

M app/javascript/mastodon/features/account_timeline/index.jsx => app/javascript/mastodon/features/account_timeline/index.jsx +1 -1
@@ 17,7 17,7 @@ import { lookupAccount, fetchAccount } from '../../actions/accounts';
import { fetchFeaturedTags } from '../../actions/featured_tags';
import { expandAccountFeaturedTimeline, expandAccountTimeline, connectTimeline, disconnectTimeline } from '../../actions/timelines';
import ColumnBackButton from '../../components/column_back_button';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import StatusList from '../../components/status_list';
import Column from '../ui/components/column';


M app/javascript/mastodon/features/blocks/index.jsx => app/javascript/mastodon/features/blocks/index.jsx +1 -1
@@ 10,7 10,7 @@ import { debounce } from 'lodash';

import { fetchBlocks, expandBlocks } from '../../actions/blocks';
import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column';

M app/javascript/mastodon/features/directory/index.jsx => app/javascript/mastodon/features/directory/index.jsx +1 -1
@@ 14,7 14,7 @@ import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import { LoadMore } from 'mastodon/components/load_more';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { RadioButton } from 'mastodon/components/radio_button';
import ScrollContainer from 'mastodon/containers/scroll_container';


M app/javascript/mastodon/features/domain_blocks/index.jsx => app/javascript/mastodon/features/domain_blocks/index.jsx +1 -1
@@ 12,7 12,7 @@ import { debounce } from 'lodash';

import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import DomainContainer from '../../containers/domain_container';
import Column from '../ui/components/column';

M app/javascript/mastodon/features/explore/links.jsx => app/javascript/mastodon/features/explore/links.jsx +1 -1
@@ 8,7 8,7 @@ import { connect } from 'react-redux';

import { fetchTrendingLinks } from 'mastodon/actions/trends';
import DismissableBanner from 'mastodon/components/dismissable_banner';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';

import Story from './components/story';


M app/javascript/mastodon/features/explore/results.jsx => app/javascript/mastodon/features/explore/results.jsx +1 -1
@@ 12,7 12,7 @@ import { connect } from 'react-redux';
import { expandSearch } from 'mastodon/actions/search';
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
import { LoadMore } from 'mastodon/components/load_more';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import Account from 'mastodon/containers/account_container';
import Status from 'mastodon/containers/status_container';


M app/javascript/mastodon/features/explore/suggestions.jsx => app/javascript/mastodon/features/explore/suggestions.jsx +1 -1
@@ 7,7 7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';

import { fetchSuggestions } from 'mastodon/actions/suggestions';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import AccountCard from 'mastodon/features/directory/components/account_card';

const mapStateToProps = state => ({

M app/javascript/mastodon/features/explore/tags.jsx => app/javascript/mastodon/features/explore/tags.jsx +1 -1
@@ 9,7 9,7 @@ import { connect } from 'react-redux';
import { fetchTrendingHashtags } from 'mastodon/actions/trends';
import DismissableBanner from 'mastodon/components/dismissable_banner';
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';

const mapStateToProps = state => ({
  hashtags: state.getIn(['trends', 'tags', 'items']),

M app/javascript/mastodon/features/favourites/index.jsx => app/javascript/mastodon/features/favourites/index.jsx +1 -1
@@ 11,7 11,7 @@ import { connect } from 'react-redux';
import { fetchFavourites } from 'mastodon/actions/interactions';
import ColumnHeader from 'mastodon/components/column_header';
import { Icon }  from 'mastodon/components/icon';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list';
import AccountContainer from 'mastodon/containers/account_container';
import Column from 'mastodon/features/ui/components/column';

M app/javascript/mastodon/features/followers/index.jsx => app/javascript/mastodon/features/followers/index.jsx +1 -1
@@ 20,7 20,7 @@ import {
  expandFollowers,
} from '../../actions/accounts';
import ColumnBackButton from '../../components/column_back_button';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import AccountContainer from '../../containers/account_container';
import LimitedAccountHint from '../account_timeline/components/limited_account_hint';

M app/javascript/mastodon/features/following/index.jsx => app/javascript/mastodon/features/following/index.jsx +1 -1
@@ 20,7 20,7 @@ import {
  expandFollowing,
} from '../../actions/accounts';
import ColumnBackButton from '../../components/column_back_button';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import AccountContainer from '../../containers/account_container';
import LimitedAccountHint from '../account_timeline/components/limited_account_hint';

M app/javascript/mastodon/features/list_timeline/index.jsx => app/javascript/mastodon/features/list_timeline/index.jsx +1 -1
@@ 18,7 18,7 @@ import { expandListTimeline } from 'mastodon/actions/timelines';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import { Icon }  from 'mastodon/components/icon';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { RadioButton } from 'mastodon/components/radio_button';
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
import StatusListContainer from 'mastodon/features/ui/containers/status_list_container';

M app/javascript/mastodon/features/lists/index.jsx => app/javascript/mastodon/features/lists/index.jsx +1 -1
@@ 12,7 12,7 @@ import { createSelector } from 'reselect';
import { fetchLists } from 'mastodon/actions/lists';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list';
import ColumnLink from 'mastodon/features/ui/components/column_link';
import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';

M app/javascript/mastodon/features/mutes/index.jsx => app/javascript/mastodon/features/mutes/index.jsx +1 -1
@@ 12,7 12,7 @@ import { debounce } from 'lodash';

import { fetchMutes, expandMutes } from '../../actions/mutes';
import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column';

M app/javascript/mastodon/features/reblogs/index.jsx => app/javascript/mastodon/features/reblogs/index.jsx +1 -1
@@ 12,7 12,7 @@ import { Icon }  from 'mastodon/components/icon';

import { fetchReblogs } from '../../actions/interactions';
import ColumnHeader from '../../components/column_header';
import LoadingIndicator from '../../components/loading_indicator';
import { LoadingIndicator } from '../../components/loading_indicator';
import ScrollableList from '../../components/scrollable_list';
import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column';

M app/javascript/mastodon/features/report/statuses.jsx => app/javascript/mastodon/features/report/statuses.jsx +1 -1
@@ 8,7 8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';

import Button from 'mastodon/components/button';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import StatusCheckBox from 'mastodon/features/report/containers/status_check_box_container';

const mapStateToProps = (state, { accountId }) => ({

M app/javascript/mastodon/features/status/index.jsx => app/javascript/mastodon/features/status/index.jsx +1 -1
@@ 14,7 14,7 @@ import { createSelector } from 'reselect';
import { HotKeys } from 'react-hotkeys';

import { Icon }  from 'mastodon/components/icon';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollContainer from 'mastodon/containers/scroll_container';
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';


M app/javascript/mastodon/features/ui/components/modal_loading.jsx => app/javascript/mastodon/features/ui/components/modal_loading.jsx +1 -1
@@ 1,4 1,4 @@
import LoadingIndicator from '../../../components/loading_indicator';
import { LoadingIndicator } from '../../../components/loading_indicator';

// Keep the markup in sync with <BundleModalError />
// (make sure they have the same dimensions)