diff --git a/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx index d3183133ba99e164f2ff9055bcad861095bf5654..d989604f389127f3c030bc616f7077b37cb8efbb 100644 --- a/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx @@ -14,7 +14,7 @@ export function ReportAutocomplete({ embedded, ...props }: ReportAutocompleteProps) { - const reports = useReports() || []; + const { data: reports } = useReports(); return ( <Autocomplete diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx index 34fb1b17acb8a86651d3019842a7c9f751edddb7..a2a71ef832770b7a73834635a191c030c87068fd 100644 --- a/packages/desktop-client/src/components/reports/Overview.tsx +++ b/packages/desktop-client/src/components/reports/Overview.tsx @@ -21,7 +21,7 @@ import { NetWorthCard } from './reports/NetWorthCard'; import { SpendingCard } from './reports/SpendingCard'; export function Overview() { - const customReports = useReports(); + const { data: customReports } = useReports(); const { isNarrowWidth } = useResponsive(); const location = useLocation(); diff --git a/packages/desktop-client/src/components/reports/SaveReport.tsx b/packages/desktop-client/src/components/reports/SaveReport.tsx index 185919f0e878ae7b67b5799d41d3d94ae0e26c77..e961d8e2d1cbd31520b8df12a1c44515f1c9683a 100644 --- a/packages/desktop-client/src/components/reports/SaveReport.tsx +++ b/packages/desktop-client/src/components/reports/SaveReport.tsx @@ -34,7 +34,7 @@ export function SaveReport({ savedStatus, onReportChange, }: SaveReportProps) { - const listReports = useReports(); + const { data: listReports } = useReports(); const triggerRef = useRef(null); const [deleteMenuOpen, setDeleteMenuOpen] = useState(false); const [nameMenuOpen, setNameMenuOpen] = useState(false); diff --git a/packages/desktop-client/src/components/util/GenericInput.jsx b/packages/desktop-client/src/components/util/GenericInput.jsx index f0152fa236a581ae1a267af2597c6ce74b8d76af..ed59442c0a2d29f37e1bb23bc1024fd14421170f 100644 --- a/packages/desktop-client/src/components/util/GenericInput.jsx +++ b/packages/desktop-client/src/components/util/GenericInput.jsx @@ -34,7 +34,7 @@ export function GenericInput({ onChange, }) { const { grouped: categoryGroups } = useCategories(); - const savedReports = useReports(); + const { data: savedReports } = useReports(); const saved = useSelector(state => state.queries.saved); const dateFormat = useDateFormat() || 'MM/dd/yyyy'; diff --git a/packages/loot-core/src/client/data-hooks/reports.ts b/packages/loot-core/src/client/data-hooks/reports.ts index 693086146233c6cf510d1a91e886755996b9b972..49662402b3bfccbed15d6e8f7124f1a042e57cb7 100644 --- a/packages/loot-core/src/client/data-hooks/reports.ts +++ b/packages/loot-core/src/client/data-hooks/reports.ts @@ -35,9 +35,10 @@ function toJS(rows: CustomReportData[]) { return reports; } -export function useReports(): CustomReportEntity[] { - const reports: CustomReportEntity[] = toJS( - useLiveQuery(() => q('custom_reports').select('*'), []) || [], +export function useReports() { + const queryData = useLiveQuery<CustomReportData[]>( + () => q('custom_reports').select('*'), + [], ); // Sort reports by alphabetical order @@ -51,5 +52,11 @@ export function useReports(): CustomReportEntity[] { ); } - return useMemo(() => sort(reports), [reports]); + return useMemo( + () => ({ + isLoading: queryData === null, + data: sort(toJS(queryData || [])), + }), + [queryData], + ); } diff --git a/upcoming-release-notes/3198.md b/upcoming-release-notes/3198.md new file mode 100644 index 0000000000000000000000000000000000000000..0e682ecc04e6e0e5bdc7c2d5c411501e122078ff --- /dev/null +++ b/upcoming-release-notes/3198.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Reports: improve `useReports` data fetching hook to return the loading state.