Fetch all replies: Only display "More replies found" prompt when there really are new replies (#36334)

app/javascript/mastodon/actions/statuses_typed.ts

@@ -9,8 +9,9 @@ import { importFetchedStatuses } from './importer';
 
 export const fetchContext = createDataLoadingThunk(
   'status/context',
-  ({ statusId }: { statusId: string }) => apiGetContext(statusId),
+  ({ statusId }: { statusId: string; prefetchOnly?: boolean }) =>
-  ({ context, refresh }, { dispatch }) => {
+    apiGetContext(statusId),
+  ({ context, refresh }, { dispatch, actionArg: { prefetchOnly = false } }) => {
     const statuses = context.ancestors.concat(context.descendants);
 
     dispatch(importFetchedStatuses(statuses));
@@ -18,6 +19,7 @@ export const fetchContext = createDataLoadingThunk(
     return {
       context,
       refresh,
+      prefetchOnly,
     };
   },
 );
@@ -26,6 +28,14 @@ export const completeContextRefresh = createAction<{ statusId: string }>(
   'status/context/complete',
 );
 
+export const showPendingReplies = createAction<{ statusId: string }>(
+  'status/context/showPendingReplies',
+);
+
+export const clearPendingReplies = createAction<{ statusId: string }>(
+  'status/context/clearPendingReplies',
+);
+
 export const setStatusQuotePolicy = createDataLoadingThunk(
   'status/setQuotePolicy',
   ({ statusId, policy }: { statusId: string; policy: ApiQuotePolicy }) => {

app/javascript/mastodon/features/status/components/refresh_controller.tsx

@@ -5,6 +5,8 @@ import { useIntl, defineMessages } from 'react-intl';
 import {
   fetchContext,
   completeContextRefresh,
+  showPendingReplies,
+  clearPendingReplies,
 } from 'mastodon/actions/statuses';
 import type { AsyncRefreshHeader } from 'mastodon/api';
 import { apiGetAsyncRefresh } from 'mastodon/api/async_refreshes';
@@ -34,10 +36,6 @@ const messages = defineMessages({
     id: 'status.context.loading',
     defaultMessage: 'Loading',
   },
-  loadingMore: {
-    id: 'status.context.loading_more',
-    defaultMessage: 'Loading more replies',
-  },
   success: {
     id: 'status.context.loading_success',
     defaultMessage: 'All replies loaded',
@@ -52,36 +50,33 @@ const messages = defineMessages({
   },
 });
 
-type LoadingState =
+type LoadingState = 'idle' | 'more-available' | 'loading' | 'success' | 'error';
-  | 'idle'
-  | 'more-available'
-  | 'loading-initial'
-  | 'loading-more'
-  | 'success'
-  | 'error';
 
 export const RefreshController: React.FC<{
   statusId: string;
 }> = ({ statusId }) => {
-  const refresh = useAppSelector(
-    (state) => state.contexts.refreshing[statusId],
-  );
-  const currentReplyCount = useAppSelector(
-    (state) => state.contexts.replies[statusId]?.length ?? 0,
-  );
-  const autoRefresh = !currentReplyCount;
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const [loadingState, setLoadingState] = useState<LoadingState>(
+  const refreshHeader = useAppSelector(
-    refresh && autoRefresh ? 'loading-initial' : 'idle',
+    (state) => state.contexts.refreshing[statusId],
   );
+  const hasPendingReplies = useAppSelector(
+    (state) => !!state.contexts.pendingReplies[statusId]?.length,
+  );
+  const [partialLoadingState, setLoadingState] = useState<LoadingState>(
+    refreshHeader ? 'loading' : 'idle',
+  );
+  const loadingState = hasPendingReplies
+    ? 'more-available'
+    : partialLoadingState;
 
   const [wasDismissed, setWasDismissed] = useState(false);
   const dismissPrompt = useCallback(() => {
     setWasDismissed(true);
     setLoadingState('idle');
-  }, []);
+    dispatch(clearPendingReplies({ statusId }));
+  }, [dispatch, statusId]);
 
   useEffect(() => {
     let timeoutId: ReturnType<typeof setTimeout>;
@@ -89,36 +84,51 @@ export const RefreshController: React.FC<{
     const scheduleRefresh = (refresh: AsyncRefreshHeader) => {
       timeoutId = setTimeout(() => {
         void apiGetAsyncRefresh(refresh.id).then((result) => {
-          if (result.async_refresh.status === 'finished') {
+          // If the refresh status is not finished,
-            dispatch(completeContextRefresh({ statusId }));
+          // schedule another refresh and exit
-
+          if (result.async_refresh.status !== 'finished') {
-            if (result.async_refresh.result_count > 0) {
-              if (autoRefresh) {
-                void dispatch(fetchContext({ statusId })).then(() => {
-                  setLoadingState('idle');
-                });
-              } else {
-                setLoadingState('more-available');
-              }
-            } else {
-              setLoadingState('idle');
-            }
-          } else {
             scheduleRefresh(refresh);
+            return;
           }
+
+          // Refresh status is finished. The action below will clear `refreshHeader`
+          dispatch(completeContextRefresh({ statusId }));
+
+          // Exit if there's nothing to fetch
+          if (result.async_refresh.result_count === 0) {
+            setLoadingState('idle');
+            return;
+          }
+
+          // A positive result count means there _might_ be new replies,
+          // so we fetch the context in the background to check if there
+          // are any new replies.
+          // If so, they will populate `contexts.pendingReplies[statusId]`
+          void dispatch(fetchContext({ statusId, prefetchOnly: true }))
+            .then(() => {
+              // Reset loading state to `idle` – but if the fetch
+              // has resulted in new pending replies, the `hasPendingReplies`
+              // flag will switch the loading state to 'more-available'
+              setLoadingState('idle');
+            })
+            .catch(() => {
+              // Show an error if the fetch failed
+              setLoadingState('error');
+            });
         });
       }, refresh.retry * 1000);
     };
 
-    if (refresh && !wasDismissed) {
+    // Initialise a refresh
-      scheduleRefresh(refresh);
+    if (refreshHeader && !wasDismissed) {
-      setLoadingState('loading-initial');
+      scheduleRefresh(refreshHeader);
+      setLoadingState('loading');
     }
 
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [dispatch, statusId, refresh, autoRefresh, wasDismissed]);
+  }, [dispatch, statusId, refreshHeader, wasDismissed]);
 
   useEffect(() => {
     // Hide success message after a short delay
@@ -134,20 +144,19 @@ export const RefreshController: React.FC<{
     return () => '';
   }, [loadingState]);
 
-  const handleClick = useCallback(() => {
+  useEffect(() => {
-    setLoadingState('loading-more');
+    // Clear pending replies on unmount
-
+    return () => {
-    dispatch(fetchContext({ statusId }))
+      dispatch(clearPendingReplies({ statusId }));
-      .then(() => {
+    };
-        setLoadingState('success');
-        return '';
-      })
-      .catch(() => {
-        setLoadingState('error');
-      });
   }, [dispatch, statusId]);
 
-  if (loadingState === 'loading-initial') {
+  const handleClick = useCallback(() => {
+    dispatch(showPendingReplies({ statusId }));
+    setLoadingState('success');
+  }, [dispatch, statusId]);
+
+  if (loadingState === 'loading') {
     return (
       <div
         className='load-more load-gap'
@@ -170,13 +179,6 @@ export const RefreshController: React.FC<{
         onDismiss={dismissPrompt}
         animateFrom='below'
       />
-      <AnimatedAlert
-        isLoading
-        withEntryDelay
-        isActive={loadingState === 'loading-more'}
-        message={intl.formatMessage(messages.loadingMore)}
-        animateFrom='below'
-      />
       <AnimatedAlert
         withEntryDelay
         isActive={loadingState === 'error'}

app/javascript/mastodon/locales/en.json

@@ -875,7 +875,6 @@
   "status.contains_quote": "Contains quote",
   "status.context.loading": "Loading more replies",
   "status.context.loading_error": "Couldn't load new replies",
-  "status.context.loading_more": "Loading more replies",
   "status.context.loading_success": "All replies loaded",
   "status.context.more_replies_found": "More replies found",
   "status.context.retry": "Retry",

app/javascript/mastodon/reducers/contexts.ts

@@ -13,7 +13,12 @@ import type {
 import type { Status } from 'mastodon/models/status';
 
 import { blockAccountSuccess, muteAccountSuccess } from '../actions/accounts';
-import { fetchContext, completeContextRefresh } from '../actions/statuses';
+import {
+  fetchContext,
+  completeContextRefresh,
+  showPendingReplies,
+  clearPendingReplies,
+} from '../actions/statuses';
 import { TIMELINE_UPDATE } from '../actions/timelines';
 import { compareId } from '../compare_id';
 
@@ -26,52 +31,84 @@ interface TimelineUpdateAction extends UnknownAction {
 interface State {
   inReplyTos: Record<string, string>;
   replies: Record<string, string[]>;
+  pendingReplies: Record<
+    string,
+    Pick<ApiStatusJSON, 'id' | 'in_reply_to_id'>[]
+  >;
   refreshing: Record<string, AsyncRefreshHeader>;
 }
 
 const initialState: State = {
   inReplyTos: {},
   replies: {},
+  pendingReplies: {},
   refreshing: {},
 };
 
+const addReply = (
+  state: Draft<State>,
+  { id, in_reply_to_id }: Pick<ApiStatusJSON, 'id' | 'in_reply_to_id'>,
+) => {
+  if (!in_reply_to_id) {
+    return;
+  }
+
+  if (!state.inReplyTos[id]) {
+    const siblings = (state.replies[in_reply_to_id] ??= []);
+    const index = siblings.findIndex((sibling) => compareId(sibling, id) < 0);
+    siblings.splice(index + 1, 0, id);
+    state.inReplyTos[id] = in_reply_to_id;
+  }
+};
+
 const normalizeContext = (
   state: Draft<State>,
   id: string,
   { ancestors, descendants }: ApiContextJSON,
 ): void => {
-  const addReply = ({
+  ancestors.forEach((item) => {
-    id,
+    addReply(state, item);
-    in_reply_to_id,
+  });
-  }: {
-    id: string;
-    in_reply_to_id?: string;
-  }) => {
-    if (!in_reply_to_id) {
-      return;
-    }
-
-    if (!state.inReplyTos[id]) {
-      const siblings = (state.replies[in_reply_to_id] ??= []);
-      const index = siblings.findIndex((sibling) => compareId(sibling, id) < 0);
-      siblings.splice(index + 1, 0, id);
-      state.inReplyTos[id] = in_reply_to_id;
-    }
-  };
 
   // We know in_reply_to_id of statuses but `id` itself.
   // So we assume that the status of the id replies to last ancestors.
-
-  ancestors.forEach(addReply);
-
   if (ancestors[0]) {
-    addReply({
+    addReply(state, {
       id,
       in_reply_to_id: ancestors[ancestors.length - 1]?.id,
     });
   }
 
-  descendants.forEach(addReply);
+  descendants.forEach((item) => {
+    addReply(state, item);
+  });
+};
+
+const applyPrefetchedReplies = (state: Draft<State>, statusId: string) => {
+  const pendingReplies = state.pendingReplies[statusId];
+  if (pendingReplies?.length) {
+    pendingReplies.forEach((item) => {
+      addReply(state, item);
+    });
+    delete state.pendingReplies[statusId];
+  }
+};
+
+const storePrefetchedReplies = (
+  state: Draft<State>,
+  statusId: string,
+  { descendants }: ApiContextJSON,
+): void => {
+  descendants.forEach(({ id, in_reply_to_id }) => {
+    if (!in_reply_to_id) {
+      return;
+    }
+    const isNewReply = !state.replies[in_reply_to_id]?.includes(id);
+    if (isNewReply) {
+      const pendingReplies = (state.pendingReplies[statusId] ??= []);
+      pendingReplies.push({ id, in_reply_to_id });
+    }
+  });
 };
 
 const deleteFromContexts = (state: Draft<State>, ids: string[]): void => {
@@ -129,12 +166,30 @@ const updateContext = (state: Draft<State>, status: ApiStatusJSON): void => {
 export const contextsReducer = createReducer(initialState, (builder) => {
   builder
     .addCase(fetchContext.fulfilled, (state, action) => {
-      normalizeContext(state, action.meta.arg.statusId, action.payload.context);
+      if (action.payload.prefetchOnly) {
+        storePrefetchedReplies(
+          state,
+          action.meta.arg.statusId,
+          action.payload.context,
+        );
+      } else {
+        normalizeContext(
+          state,
+          action.meta.arg.statusId,
+          action.payload.context,
+        );
 
-      if (action.payload.refresh) {
+        if (action.payload.refresh) {
-        state.refreshing[action.meta.arg.statusId] = action.payload.refresh;
+          state.refreshing[action.meta.arg.statusId] = action.payload.refresh;
+        }
       }
     })
+    .addCase(showPendingReplies, (state, action) => {
+      applyPrefetchedReplies(state, action.payload.statusId);
+    })
+    .addCase(clearPendingReplies, (state, action) => {
+      delete state.pendingReplies[action.payload.statusId];
+    })
     .addCase(completeContextRefresh, (state, action) => {
       delete state.refreshing[action.payload.statusId];
     })