Fix directory scroll position reset (#34560)

app/javascript/mastodon/components/load_more.tsx

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

app/javascript/mastodon/features/directory/index.tsx

@@ -130,6 +130,7 @@ export const Directory: React.FC<{
   }, [dispatch, order, local]);
 
   const pinned = !!columnId;
+  const initialLoad = isLoading && accountIds.size === 0;
 
   const scrollableArea = (
     <div className='scrollable'>
@@ -170,7 +171,7 @@ export const Directory: React.FC<{
       </div>
 
       <div className='directory__list'>
-        {isLoading ? (
+        {initialLoad ? (
           <LoadingIndicator />
         ) : (
           accountIds.map((accountId) => (
@@ -179,7 +180,11 @@ export const Directory: React.FC<{
         )}
       </div>
 
-      <LoadMore onClick={handleLoadMore} visible={!isLoading} />
+      <LoadMore
+        onClick={handleLoadMore}
+        visible={!initialLoad}
+        loading={isLoading}
+      />
     </div>
   );