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

app/javascript/styles/mastodon/components.scss

@@ -4028,23 +4028,27 @@ a.status-card {
 }
 
 .load-more {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $dark-text-color;
   background-color: transparent;
   border: 0;
   font-size: inherit;
-  text-align: center;
   line-height: inherit;
-  margin: 0;
+  width: 100%;
   padding: 15px;
   box-sizing: border-box;
-  width: 100%;
-  clear: both;
   text-decoration: none;
 
   &:hover {
     background: var(--on-surface-color);
   }
+
+  .icon {
+    width: 22px;
+    height: 22px;
+  }
 }
 
 .load-gap {
@@ -4421,6 +4425,7 @@ a.status-card {
   justify-content: center;
 }
 
+.load-more .loading-indicator,
 .button .loading-indicator {
   position: static;
   transform: none;
@@ -4432,6 +4437,10 @@ a.status-card {
   }
 }
 
+.load-more .loading-indicator .circular-progress {
+  color: lighten($ui-base-color, 26%);
+}
+
 .circular-progress {
   color: lighten($ui-base-color, 26%);
   animation: 1.4s linear 0s infinite normal none running simple-rotate;