(reports) improve useReports data fetching hook to return loading state (#3198)

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

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();

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);

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';
 

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],
+  );
 }

upcoming-release-notes/3198.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Reports: improve `useReports` data fetching hook to return the loading state.