diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index a891d22dd7..4b77f92b06 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
import Eye from '../../icons/v2/Eye';
import EyeSlashed from '../../icons/v2/EyeSlashed';
@@ -67,7 +67,7 @@ export default function CategorySelector({
),
);
return (
- <>
+
-
+
);
})}
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index 790feeb553..04308f7d5e 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -8,6 +8,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import useCategories from '../../hooks/useCategories';
import useFeatureFlag from '../../hooks/useFeatureFlag';
+import AnimatedLoading from '../../icons/AnimatedLoading';
import { colors, styles } from '../../style';
import AnchorLink from '../common/AnchorLink';
import Block from '../common/Block';
@@ -63,6 +64,20 @@ function Card({ flex, to, style, children }) {
return content;
}
+function LoadingIndicator() {
+ return (
+
+
+
+ );
+}
+
function NetWorthCard({ accounts }) {
const end = monthUtils.currentMonth();
const start = monthUtils.subMonths(end, 5);
@@ -76,10 +91,6 @@ function NetWorthCard({ accounts }) {
);
const data = useReport('net_worth', params);
- if (!data) {
- return null;
- }
-
return (
-
-
+ {data && (
+
+
+
+ {integerToCurrency(data.netWorth)}
+
+
- {integerToCurrency(data.netWorth)}
+
-
-
-
-
-
+
+ )}
-
+ {data ? (
+
+ ) : (
+
+ )}
);
@@ -136,13 +156,9 @@ function CashFlowCard() {
const onCardHover = useCallback(() => setIsCardHovered(true));
const onCardHoverEnd = useCallback(() => setIsCardHovered(false));
- if (!data) {
- return null;
- }
-
- const { graphData } = data;
- const expense = -(graphData.expense || 0);
- const income = graphData.income || 0;
+ const { graphData } = data || {};
+ const expense = -(graphData?.expense || 0);
+ const income = graphData?.income || 0;
return (
@@ -161,102 +177,108 @@ function CashFlowCard() {
-
-
-
-
-
+ {data && (
+
+
+
+
+
+ )}
-
- {(width, height, portalHost) => (
-
- }
- labelComponent={
- (y + 40 > height ? height - 40 : y)}
- light={true}
- forceActive={true}
- style={{
- padding: 0,
- }}
+ {data ? (
+
+ {(width, height, portalHost) => (
+
+ }
+ labelComponent={
+ (y + 40 > height ? height - 40 : y)}
+ light={true}
+ forceActive={true}
+ style={{
+ padding: 0,
+ }}
+ />
+ }
+ padding={{
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ }}
+ >
+
+ Income
+
+
+ {integerToCurrency(income)}
+
+
+
+ ),
+ labelPosition: 'left',
+ },
+ ]}
+ labels={d => d.premadeLabel}
/>
- }
- padding={{
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- }}
- >
-
- Income
+
-
- {integerToCurrency(income)}
-
+ Expenses
+
+
+ {integerToCurrency(expense)}
+
+
-
- ),
- labelPosition: 'left',
- },
- ]}
- labels={d => d.premadeLabel}
- />
-
- Expenses
-
-
- {integerToCurrency(expense)}
-
-
-
- ),
- labelPosition: 'right',
- fill: theme.colors.red,
- },
- ]}
- labels={d => d.premadeLabel}
- />
-
- )}
-
+ ),
+ labelPosition: 'right',
+ fill: theme.colors.red,
+ },
+ ]}
+ labels={d => d.premadeLabel}
+ />
+
+ )}
+
+ ) : (
+
+ )}
);
}
function CategorySpendingCard() {
- const categories = useCategories();
+ const { list: categories = [] } = useCategories();
const end = monthUtils.currentDay();
const start = monthUtils.subMonths(end, 3);
@@ -266,9 +288,7 @@ function CategorySpendingCard() {
start,
end,
3,
- (categories.list || []).filter(
- category => !category.is_income && !category.hidden,
- ),
+ categories.filter(category => !category.is_income && !category.hidden),
);
}, [start, end, categories]);
@@ -289,13 +309,16 @@ function CategorySpendingCard() {
- {!perCategorySpending ? null : (
+
+ {perCategorySpending ? (
+ ) : (
+
)}
);
diff --git a/packages/desktop-client/src/components/reports/graphs/category-spending-spreadsheet.tsx b/packages/desktop-client/src/components/reports/graphs/category-spending-spreadsheet.tsx
index 9dde112f77..d4bb392edd 100644
--- a/packages/desktop-client/src/components/reports/graphs/category-spending-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/category-spending-spreadsheet.tsx
@@ -52,7 +52,6 @@ export default function createSpreadsheet(
setData: (graphData: CategorySpendingGraphData) => void,
) => {
if (start === null || end === null || categories.length === 0) {
- setData({ categories: [], tickValues: [], data: {} });
return;
}
@@ -72,7 +71,6 @@ export default function createSpreadsheet(
.select('date'),
);
if (firstTransaction.data.length === 0) {
- setData({ categories: [], tickValues: [], data: {} });
return;
}
diff --git a/packages/desktop-client/src/components/reports/graphs/common.tsx b/packages/desktop-client/src/components/reports/graphs/common.tsx
index 4c384cf54e..c88ccd2327 100644
--- a/packages/desktop-client/src/components/reports/graphs/common.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/common.tsx
@@ -14,7 +14,7 @@ export function Area({ start, end, scale, range }: AreaProps) {
const startX = scale.x(d.parseISO(start + '-01'));
const endX = scale.x(d.parseISO(end + '-01'));
- if (startX < 0 || endX < 0) {
+ if (startX < 0 || endX < 0 || startX === undefined || endX === undefined) {
return null;
}
diff --git a/upcoming-release-notes/1491.md b/upcoming-release-notes/1491.md
new file mode 100644
index 0000000000..56ac7a9ad7
--- /dev/null
+++ b/upcoming-release-notes/1491.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Add loading indicators to reports page