From e6d931729c848dee90b399165e08270d169c03c9 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Fri, 30 Jun 2023 12:24:28 -0400
Subject: [PATCH] Extract the reports page into a separate JS file (#1210)
---
.../src/components/LoggedInUser.js | 14 +-----
.../src/components/reports/ReportRouter.js | 16 +++++++
.../src/components/reports/index.js | 20 ---------
.../src/components/reports/index.tsx | 44 +++++++++++++++++++
packages/desktop-client/src/polyfills.ts | 4 +-
packages/desktop-client/src/style.tsx | 11 +++++
upcoming-release-notes/1210.md | 6 +++
7 files changed, 82 insertions(+), 33 deletions(-)
create mode 100644 packages/desktop-client/src/components/reports/ReportRouter.js
delete mode 100644 packages/desktop-client/src/components/reports/index.js
create mode 100644 packages/desktop-client/src/components/reports/index.tsx
create mode 100644 upcoming-release-notes/1210.md
diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js
index ba41e9cbe..5692064a8 100644
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/packages/desktop-client/src/components/LoggedInUser.js
@@ -1,20 +1,13 @@
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,
]}
>
diff --git a/packages/desktop-client/src/components/reports/ReportRouter.js b/packages/desktop-client/src/components/reports/ReportRouter.js
new file mode 100644
index 000000000..745a198c9
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportRouter.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import CashFlow from './CashFlow';
+import NetWorth from './NetWorth';
+import Overview from './Overview';
+
+export function ReportRouter() {
+ return (
+ <Routes>
+ <Route path="/" element={<Overview />} />
+ <Route path="/net-worth" element={<NetWorth />} />
+ <Route path="/cash-flow" element={<CashFlow />} />
+ </Routes>
+ );
+}
diff --git a/packages/desktop-client/src/components/reports/index.js b/packages/desktop-client/src/components/reports/index.js
deleted file mode 100644
index b0ccfe63c..000000000
--- a/packages/desktop-client/src/components/reports/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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() {
- 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>
- );
-}
diff --git a/packages/desktop-client/src/components/reports/index.tsx b/packages/desktop-client/src/components/reports/index.tsx
new file mode 100644
index 000000000..4d110091b
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/index.tsx
@@ -0,0 +1,44 @@
+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>
+ );
+}
diff --git a/packages/desktop-client/src/polyfills.ts b/packages/desktop-client/src/polyfills.ts
index 0b58bbcbf..e85c5815c 100644
--- a/packages/desktop-client/src/polyfills.ts
+++ b/packages/desktop-client/src/polyfills.ts
@@ -1,6 +1,8 @@
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;
}
}
diff --git a/packages/desktop-client/src/style.tsx b/packages/desktop-client/src/style.tsx
index 13dbcc255..5e3807eee 100644
--- a/packages/desktop-client/src/style.tsx
+++ b/packages/desktop-client/src/style.tsx
@@ -1,3 +1,5 @@
+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,
diff --git a/upcoming-release-notes/1210.md b/upcoming-release-notes/1210.md
new file mode 100644
index 000000000..2b0ea007c
--- /dev/null
+++ b/upcoming-release-notes/1210.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Move the report pages to a separate Webpack chunk to reduce the size of the main bundle by 25%.
--
GitLab