diff --git a/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx index d3183133ba9..d989604f389 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 ( 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 69308614623..49662402b3b 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( + () => 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 00000000000..0e682ecc04e --- /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.