Rewrite <LoadingIndicator/> as FC and TS (#25364)

app/javascript/mastodon/components/circular_progress.tsx

@@ -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>
+  );
+};

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -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;

app/javascript/mastodon/components/loading_indicator.jsx

@@ -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;

app/javascript/mastodon/components/loading_indicator.tsx

@@ -0,0 +1,7 @@
+import { CircularProgress } from './circular_progress';
+
+export const LoadingIndicator: React.FC = () => (
+  <div className='loading-indicator'>
+    <CircularProgress size={50} strokeWidth={6} />
+  </div>
+);

app/javascript/mastodon/components/scrollable_list.jsx

@@ -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;