From a2e434a1fbc35d2300e86a53b1b2919d106dbdff Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Tue, 6 Aug 2024 20:47:43 +0100
Subject: [PATCH] :recycle: (reports) improve useReports data fetching hook to
 return loading state (#3198)

---
 .../autocomplete/ReportAutocomplete.tsx           |  2 +-
 .../src/components/reports/Overview.tsx           |  2 +-
 .../src/components/reports/SaveReport.tsx         |  2 +-
 .../src/components/util/GenericInput.jsx          |  2 +-
 .../loot-core/src/client/data-hooks/reports.ts    | 15 +++++++++++----
 upcoming-release-notes/3198.md                    |  6 ++++++
 6 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 upcoming-release-notes/3198.md

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 (
     <Autocomplete
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index 34fb1b17acb..a2a71ef8327 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 185919f0e87..e961d8e2d1c 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 f0152fa236a..ed59442c0a2 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 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<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 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.