diff --git a/packages/loot-core/src/client/data-hooks/filters.ts b/packages/loot-core/src/client/data-hooks/filters.ts index c23bc800b8..e5002c2b74 100644 --- a/packages/loot-core/src/client/data-hooks/filters.ts +++ b/packages/loot-core/src/client/data-hooks/filters.ts @@ -1,5 +1,5 @@ // @ts-strict-ignore -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { q } from '../../shared/query'; import { type TransactionFilterEntity } from '../../types/models'; @@ -25,13 +25,14 @@ export function useFilters(): TransactionFilterEntity[] { [], ); - return useMemo( - () => - toJS(data ? [...data] : []).sort((a, b) => - a.name - .trim() - .localeCompare(b.name.trim(), undefined, { ignorePunctuation: true }), - ), - [data], - ); + /** Sort filters by alphabetical order */ + const sort = useCallback((filters: TransactionFilterEntity[]) => { + return filters.toSorted((a, b) => + a.name + .trim() + .localeCompare(b.name.trim(), undefined, { ignorePunctuation: true }), + ); + }, []); + + return useMemo(() => sort(toJS(data ? [...data] : [])), [data, sort]); } diff --git a/packages/loot-core/src/client/data-hooks/schedules.tsx b/packages/loot-core/src/client/data-hooks/schedules.tsx index 03b95b42b3..25613dd78b 100644 --- a/packages/loot-core/src/client/data-hooks/schedules.tsx +++ b/packages/loot-core/src/client/data-hooks/schedules.tsx @@ -53,6 +53,9 @@ function loadStatuses( type UseSchedulesProps = { query?: Query; + options?: { + isDisabled?: boolean; + }; }; type ScheduleData = { schedules: readonly ScheduleEntity[]; @@ -60,11 +63,13 @@ type ScheduleData = { }; type UseSchedulesResult = ScheduleData & { readonly isLoading: boolean; + readonly isDisabled: boolean; readonly error?: Error; }; export function useSchedules({ query, + options: { isDisabled } = { isDisabled: false }, }: UseSchedulesProps = {}): UseSchedulesResult { const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(undefined); @@ -98,7 +103,7 @@ export function useSchedules({ return; } - setIsLoading(true); + setIsLoading(query !== null); scheduleQueryRef.current = liveQuery(query, { onData: async schedules => { @@ -126,8 +131,9 @@ export function useSchedules({ return { isLoading, + isDisabled, error, - ...data, + ...(isDisabled ? { schedules: [], statuses: new Map() } : data), }; } diff --git a/packages/loot-core/src/client/data-hooks/transactions.ts b/packages/loot-core/src/client/data-hooks/transactions.ts index 096fe2836e..c97f448277 100644 --- a/packages/loot-core/src/client/data-hooks/transactions.ts +++ b/packages/loot-core/src/client/data-hooks/transactions.ts @@ -119,13 +119,21 @@ export function useTransactions({ }; } +type UsePreviewTransactionsProps = { + options?: { + isDisabled?: boolean; + }; +} + type UsePreviewTransactionsResult = { data: ReadonlyArray; isLoading: boolean; error?: Error; }; -export function usePreviewTransactions(): UsePreviewTransactionsResult { +export function usePreviewTransactions({ + options: { isDisabled } = { isDisabled: false }, +}: UsePreviewTransactionsProps = {}): UsePreviewTransactionsResult { const [previewTransactions, setPreviewTransactions] = useState< TransactionEntity[] >([]); @@ -143,6 +151,10 @@ export function usePreviewTransactions(): UsePreviewTransactionsResult { return []; } + let isUnmounted = false; + + setIsLoading(schedules.length > 0); + // Kick off an async rules application const schedulesForPreview = schedules.filter(s => isForPreview(s, statuses), @@ -207,7 +219,7 @@ export function usePreviewTransactions(): UsePreviewTransactionsResult { }, [scheduleTransactions, schedules, statuses]); return { - data: previewTransactions, + data: isDisabled ? [] : previewTransactions, isLoading: isLoading || isSchedulesLoading, error: error || scheduleQueryError, };