diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx index 8f4ffbbccfe..952c736074d 100644 --- a/packages/desktop-client/src/components/modals/EditRuleModal.jsx +++ b/packages/desktop-client/src/components/modals/EditRuleModal.jsx @@ -303,13 +303,15 @@ function formatAmount(amount) { function ScheduleDescription({ id }) { const dateFormat = useDateFormat() || 'MM/dd/yyyy'; + const scheduleQuery = useMemo( + () => q('schedules').filter({ id }).select('*'), + [id], + ); const { schedules, statuses: scheduleStatuses, isLoading: isSchedulesLoading, - } = useSchedules({ - query: useMemo(() => q('schedules').filter({ id }).select('*'), [id]), - }); + } = useSchedules({ query: scheduleQuery }); if (isSchedulesLoading) { return null; diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx index f3bf6a846b0..bf0c83d4d75 100644 --- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx @@ -33,11 +33,12 @@ export function ScheduledTransactionMenuModal({ borderTop: `1px solid ${theme.pillBorder}`, }; const scheduleId = transactionId?.split('/')?.[1]; + const schedulesQuery = useMemo( + () => q('schedules').filter({ id: scheduleId }).select('*'), + [scheduleId], + ); const { isLoading: isSchedulesLoading, schedules } = useSchedules({ - query: useMemo( - () => q('schedules').filter({ id: scheduleId }).select('*'), - [scheduleId], - ), + query: schedulesQuery, }); if (isSchedulesLoading) { diff --git a/packages/desktop-client/src/components/rules/ScheduleValue.tsx b/packages/desktop-client/src/components/rules/ScheduleValue.tsx index 27109e4e0fd..736b0378cf6 100644 --- a/packages/desktop-client/src/components/rules/ScheduleValue.tsx +++ b/packages/desktop-client/src/components/rules/ScheduleValue.tsx @@ -7,6 +7,8 @@ import { describeSchedule } from 'loot-core/src/shared/schedules'; import { type ScheduleEntity } from 'loot-core/src/types/models'; import { usePayees } from '../../hooks/usePayees'; +import { AnimatedLoading } from '../../icons/AnimatedLoading'; +import { View } from '../common/View'; import { Value } from './Value'; @@ -17,12 +19,15 @@ type ScheduleValueProps = { export function ScheduleValue({ value }: ScheduleValueProps) { const payees = usePayees(); const byId = getPayeesById(payees); - const { schedules = [], isLoading } = useSchedules({ - query: useMemo(() => q('schedules').select('*'), []), - }); + const schedulesQuery = useMemo(() => q('schedules').select('*'), []); + const { schedules = [], isLoading } = useSchedules({ query: schedulesQuery }); if (isLoading) { - return null; + return ( + + + + ); } return ( diff --git a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx index 386a6df0dc3..a787fe9fe6e 100644 --- a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx +++ b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx @@ -37,20 +37,17 @@ export function ScheduleLink({ const dispatch = useDispatch(); const [filter, setFilter] = useState(accountName || ''); - - const scheduleData = useSchedules({ - query: useMemo( - () => q('schedules').filter({ completed: false }).select('*'), - [], - ), - }); + const schedulesQuery = useMemo( + () => q('schedules').filter({ completed: false }).select('*'), + [], + ); + const { + isLoading: isSchedulesLoading, + schedules, + statuses, + } = useSchedules({ query: schedulesQuery }); const searchInput = useRef(null); - if (scheduleData == null) { - return null; - } - - const { schedules, statuses } = scheduleData; async function onSelect(scheduleId: string) { if (ids?.length > 0) { @@ -134,6 +131,7 @@ export function ScheduleLink({ }} > } q('schedules').select('*'), []); const { isLoading: isSchedulesLoading, schedules, statuses, - } = useSchedules({ - query: useMemo(() => q('schedules').select('*'), []), - }); - - if (isSchedulesLoading) { - return null; - } + } = useSchedules({ query: schedulesQuery }); return ( @@ -114,6 +109,7 @@ export function Schedules() { { - return [...filters].sort((a, b) => - a.name - .trim() - .localeCompare(b.name.trim(), undefined, { ignorePunctuation: true }), - ); - }, []); - - return useMemo(() => sort(toJS(data ? [...data] : [])), [data, sort]); + return useMemo( + () => + toJS(data ? [...data] : []).sort((a, b) => + a.name + .trim() + .localeCompare(b.name.trim(), undefined, { ignorePunctuation: true }), + ), + [data], + ); }