Add loading indicator to timeline gap indicators in web UI (#33762)

app/javascript/mastodon/components/load_gap.tsx

@@ -1,9 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -17,10 +18,12 @@ interface Props<T> {
 
 export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
   const intl = useIntl();
+  const [loading, setLoading] = useState(false);
 
   const handleClick = useCallback(() => {
+    setLoading(true);
     onClick(param);
-  }, [param, onClick]);
+  }, [setLoading, param, onClick]);
 
   return (
     <button
@@ -28,8 +31,13 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
       disabled={disabled}
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
+      title={intl.formatMessage(messages.load_more)}
     >
-      <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      {loading ? (
+        <LoadingIndicator />
+      ) : (
+        <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      )}
     </button>
   );
 };