Rewrite <LoadMore /> as FC and TS (#25259)

app/javascript/mastodon/components/load_more.jsx

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-export default class LoadMore extends PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func,
-    disabled: PropTypes.bool,
-    visible: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    visible: true,
-  };
-
-  render() {
-    const { disabled, visible } = this.props;
-
-    return (
-      <button type='button' className='load-more' disabled={disabled || !visible} style={{ visibility: visible ? 'visible' : 'hidden' }} onClick={this.props.onClick}>
-        <FormattedMessage id='status.load_more' defaultMessage='Load more' />
-      </button>
-    );
-  }
-
-}

app/javascript/mastodon/components/load_more.tsx

@@ -0,0 +1,24 @@
+import { FormattedMessage } from 'react-intl';
+
+interface Props {
+  onClick: (event: React.MouseEvent) => void;
+  disabled?: boolean;
+  visible?: boolean;
+}
+export const LoadMore: React.FC<Props> = ({
+  onClick,
+  disabled,
+  visible = true,
+}) => {
+  return (
+    <button
+      type='button'
+      className='load-more'
+      disabled={disabled || !visible}
+      style={{ visibility: visible ? 'visible' : 'hidden' }}
+      onClick={onClick}
+    >
+      <FormattedMessage id='status.load_more' defaultMessage='Load more' />
+    </button>
+  );
+};

app/javascript/mastodon/components/scrollable_list.jsx

@@ -15,7 +15,7 @@ import IntersectionObserverArticleContainer from '../containers/intersection_obs
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
 
-import LoadMore from './load_more';
+import { LoadMore } from './load_more';
 import LoadPending from './load_pending';
 import LoadingIndicator from './loading_indicator';