Wrapstodon: Load report data only on display (#37269)

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

@@ -10,6 +10,7 @@ import classNames from 'classnames/bind';
 import { closeModal } from '@/mastodon/actions/modal';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { getReport } from '@/mastodon/reducers/slices/annual_report';
 import {
   createAppSelector,
   useAppDispatch,
@@ -43,6 +44,13 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
   const dispatch = useAppDispatch();
   const report = useAppSelector((state) => state.annualReport.report);
   const account = useAppSelector(accountSelector);
+  const needsReport = !report; // Make into boolean to avoid object comparison in deps.
+
+  useEffect(() => {
+    if (needsReport) {
+      void dispatch(getReport());
+    }
+  }, [dispatch, needsReport]);
 
   const close = useCallback(() => {
     dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
@@ -57,7 +65,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
     }
   }, [pathname, initialPathname, close]);
 
-  if (!report) {
+  if (needsReport) {
     return <LoadingIndicator />;
   }
 

app/javascript/mastodon/features/annual_report/modal.tsx

@@ -4,10 +4,7 @@ import { useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 
 import { closeModal } from '@/mastodon/actions/modal';
-import {
-  generateReport,
-  selectWrapstodonYear,
-} from '@/mastodon/reducers/slices/annual_report';
+import { generateReport } from '@/mastodon/reducers/slices/annual_report';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { AnnualReport } from '.';
@@ -21,8 +18,7 @@ const AnnualReportModal: React.FC<{
     onChangeBackgroundColor('var(--color-bg-media-base)');
   }, [onChangeBackgroundColor]);
 
-  const { state } = useAppSelector((state) => state.annualReport);
-  const year = useAppSelector(selectWrapstodonYear);
+  const { state, year } = useAppSelector((state) => state.annualReport);
 
   const showAnnouncement = year && state && state !== 'available';
 

app/javascript/mastodon/features/annual_report/nav_item.tsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import IconPlanet from '@/images/icons/icon_planet.svg?react';
 import { openModal } from '@/mastodon/actions/modal';
 import { Icon } from '@/mastodon/components/icon';
-import { selectWrapstodonYear } from '@/mastodon/reducers/slices/annual_report';
 import {
   createAppSelector,
   useAppDispatch,
@@ -23,8 +22,7 @@ const selectReportModalOpen = createAppSelector(
 );
 
 export const AnnualReportNavItem: FC = () => {
-  const { state } = useAppSelector((state) => state.annualReport);
-  const year = useAppSelector(selectWrapstodonYear);
+  const { state, year } = useAppSelector((state) => state.annualReport);
   const active = useAppSelector(selectReportModalOpen);
 
   const dispatch = useAppDispatch();

app/javascript/mastodon/features/annual_report/timeline.tsx

@@ -3,17 +3,13 @@ import type { FC } from 'react';
 
 import { openModal } from '@/mastodon/actions/modal';
 import { useDismissible } from '@/mastodon/hooks/useDismissible';
-import {
-  generateReport,
-  selectWrapstodonYear,
-} from '@/mastodon/reducers/slices/annual_report';
+import { generateReport } from '@/mastodon/reducers/slices/annual_report';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { AnnualReportAnnouncement } from './announcement';
 
 export const AnnualReportTimeline: FC = () => {
-  const { state } = useAppSelector((state) => state.annualReport);
-  const year = useAppSelector(selectWrapstodonYear);
+  const { state, year } = useAppSelector((state) => state.annualReport);
 
   const dispatch = useAppDispatch();
   const handleBuildRequest = useCallback(() => {

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

@@ -21,6 +21,7 @@ import { PictureInPicture } from 'mastodon/features/picture_in_picture';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { layoutFromWindow } from 'mastodon/is_mobile';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
 
 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
@@ -396,6 +397,7 @@ class UI extends PureComponent {
       this.props.dispatch(expandHomeTimeline());
       this.props.dispatch(fetchNotifications());
       this.props.dispatch(fetchServerTranslationLanguages());
+      this.props.dispatch(checkAnnualReport());
 
       setTimeout(() => this.props.dispatch(fetchServer()), 3000);
     }