Extract the reports page into a separate JS file (#1210)

packages/desktop-client/src/components/LoggedInUser.js

 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 
-import { css } from 'glamor';
-
 import * as actions from 'loot-core/src/client/actions';
 
-import { colors } from '../style';
+import { colors, styles } from '../style';
 
 import { View, Text, Button, Tooltip, Menu } from './common';
 import { useServerURL } from './ServerContext';
 
-let fade = css.keyframes({
-  '0%': { opacity: 0 },
-  '100%': { opacity: 1 },
-});
-
 function LoggedInUser({
   hideIfNoServer,
   userData,
@@ -82,11 +75,8 @@ function LoggedInUser({
           {
             color: colors.n5,
             fontStyle: 'italic',
-            animationName: fade,
-            animationDuration: '0.2s',
-            animationFillMode: 'both',
-            animationDelay: '0.5s',
           },
+          styles.delayedFadeIn,
           style,
         ]}
       >

packages/desktop-client/src/components/reports/index.js → packages/desktop-client/src/components/reports/ReportRouter.js

 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-import { View } from '../common';
-
 import CashFlow from './CashFlow';
 import NetWorth from './NetWorth';
 import Overview from './Overview';
 
-export default function Reports() {
+export function ReportRouter() {
   return (
-    <View style={{ flex: 1 }} data-testid="reports-page">
-      <Routes>
-        <Route path="/" element={<Overview />} />
-        <Route path="/net-worth" element={<NetWorth />} />
-        <Route path="/cash-flow" element={<CashFlow />} />
-      </Routes>
-    </View>
+    <Routes>
+      <Route path="/" element={<Overview />} />
+      <Route path="/net-worth" element={<NetWorth />} />
+      <Route path="/cash-flow" element={<CashFlow />} />
+    </Routes>
   );
 }

packages/desktop-client/src/components/reports/index.tsx

+import { useState, useEffect } from 'react';
+
+import AnimatedLoading from '../../icons/AnimatedLoading';
+import { colors, styles } from '../../style';
+import { Block, View } from '../common';
+
+import type { ReportRouter } from './ReportRouter';
+
+export default function Reports() {
+  let [ReportRouterComponent, setReportRouter] = useState<
+    typeof ReportRouter | null
+  >(null);
+
+  useEffect(() => {
+    import(/* webpackChunkName: 'reports' */ './ReportRouter').then(module => {
+      setReportRouter(() => module.ReportRouter);
+    });
+  }, []);
+
+  return (
+    <View style={{ flex: 1 }} data-testid="reports-page">
+      {ReportRouterComponent ? (
+        <ReportRouterComponent />
+      ) : (
+        <View
+          style={[
+            {
+              flex: 1,
+              gap: 20,
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+            styles.delayedFadeIn,
+          ]}
+        >
+          <Block style={{ marginBottom: 20, fontSize: 18 }}>
+            Loading reports…
+          </Block>
+          <AnimatedLoading width={25} color={colors.n1} />
+        </View>
+      )}
+    </View>
+  );
+}

packages/desktop-client/src/polyfills.ts

 export default async function installPolyfills(): Promise<void> {
   if ('ResizeObserver' in window === false) {
-    const module = await import('@juggle/resize-observer');
+    const module = await import(
+      /* webpackChunkName: 'resize-observer-polyfill' */ '@juggle/resize-observer'
+    );
     window.ResizeObserver = module.ResizeObserver;
   }
 }

packages/desktop-client/src/style.tsx

+import { keyframes } from 'glamor';
+
 import * as Platform from 'loot-core/src/client/platform';
 
 import tokens from './tokens';
@@ -169,6 +171,15 @@ export const styles = {
     // lineHeight: 22.4 // TODO: This seems like trouble, but what's the right value?
   },
   textColor: colors.n1,
+  delayedFadeIn: {
+    animationName: keyframes({
+      '0%': { opacity: 0 },
+      '100%': { opacity: 1 },
+    }),
+    animationDuration: '0.2s',
+    animationFillMode: 'both',
+    animationDelay: '0.5s',
+  },
   // Dynamically set
   lightScrollbar: undefined,
   darkScrollbar: undefined,

upcoming-release-notes/1210.md

+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Move the report pages to a separate Webpack chunk to reduce the size of the main bundle by 25%.