Load the initial notifications when the beta feature is enabled

app/javascript/mastodon/actions/notifications_migration.tsx

@@ -0,0 +1,18 @@
+import { createAppAsyncThunk } from 'mastodon/store';
+
+import { fetchNotifications } from './notification_groups';
+import { expandNotifications } from './notifications';
+
+export const initializeNotifications = createAppAsyncThunk(
+  'notifications/initialize',
+  (_, { dispatch, getState }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    const enableBeta = getState().settings.getIn(
+      ['notifications', 'groupingBeta'],
+      false,
+    ) as boolean;
+
+    if (enableBeta) void dispatch(fetchNotifications());
+    else dispatch(expandNotifications());
+  },
+);

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

@@ -11,7 +11,6 @@ import { useDebouncedCallback } from 'use-debounce';
 import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import {
-  fetchNotifications,
   fetchNotificationsGap,
   updateScrollPosition,
   loadPending,
@@ -138,17 +137,15 @@ export const Notifications: React.FC<{
     }
   }, []);
 
-  useEffect(() => {
-    // dispatch(mountNotifications());
+  // TODO: is this necessary?
+  // useEffect(() => {
+  //   dispatch(mountNotifications());
 
-    // FIXME: remove once this becomes the main implementation
-    void dispatch(fetchNotifications());
-
-    return () => {
-      // dispatch(unmountNotifications());
-      // dispatch(updateScrollPosition({ top: false }));
-    };
-  }, [dispatch]);
+  //   return () => {
+  //     dispatch(unmountNotifications());
+  //     dispatch(updateScrollPosition({ top: false }));
+  //   };
+  // }, [dispatch]);
 
   const handleLoadGap = useCallback(
     (gap: NotificationGap) => {

app/javascript/mastodon/features/ui/index.jsx

@@ -13,6 +13,7 @@ import { HotKeys } from 'react-hotkeys';
 
 import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
+import { initializeNotifications } from 'mastodon/actions/notifications_migration';
 import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
 import { HoverCardController } from 'mastodon/components/hover_card_controller';
 import { PictureInPicture } from 'mastodon/features/picture_in_picture';
@@ -22,7 +23,6 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
-import { expandNotifications } from '../../actions/notifications';
 import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
 import { expandHomeTimeline } from '../../actions/timelines';
 import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding } from '../../initial_state';
@@ -71,6 +71,7 @@ import {
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
@@ -405,7 +406,7 @@ class UI extends PureComponent {
     if (signedIn) {
       this.props.dispatch(fetchMarkers());
       this.props.dispatch(expandHomeTimeline());
-      this.props.dispatch(expandNotifications());
+      this.props.dispatch(initializeNotifications());
       this.props.dispatch(fetchServerTranslationLanguages());
 
       setTimeout(() => this.props.dispatch(fetchServer()), 3000);