Rewrite <LoadGap /> as FC and TS (#25042)

app/javascript/mastodon/components/load_gap.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { Icon } from 'mastodon/components/icon';
+
+const messages = defineMessages({
+  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+interface Props {
+  disabled: boolean;
+  maxId: string;
+  onClick: (maxId: string) => void;
+  intl: InjectedIntl;
+}
+
+export const LoadGap = injectIntl<Props>(
+  ({ disabled, maxId, onClick, intl }) => {
+    const handleClick = useCallback(() => {
+      onClick(maxId);
+    }, [maxId, onClick]);
+
+    return (
+      <button
+        className='load-more load-gap'
+        disabled={disabled}
+        onClick={handleClick}
+        aria-label={intl.formatMessage(messages.load_more)}
+      >
+        <Icon id='ellipsis-h' />
+      </button>
+    );
+  }
+);