🐛 disable 'all payees' checkbox while schedules are loading (#1136)

Closes #1125

Disables (hides) the "all payees" checkbox when schedules are loading.

Reproduction:
1. open `/schedule/discover`
2. while the data is still loading - click on the checkbox in the table
header
3. after loading finishes - the page crashes with an error

packages/desktop-client/src/components/schedules/DiscoverSchedules.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
@@ -10,6 +10,7 @@ import useSelected, {
   useSelectedItems,
   SelectedProvider,
 } from '../../hooks/useSelected';
+import useSendPlatformRequest from '../../hooks/useSendPlatformRequest';
 import { colors } from '../../style';
 import { View, Stack, ButtonWithLoading, P } from '../common';
 import { Page, usePageType } from '../Page';
@@ -73,7 +74,7 @@ function DiscoverSchedulesTable({ schedules, loading }) {
     <View style={{ flex: 1 }}>
       <TableHeader height={ROW_HEIGHT} inset={15} version="v2">
         <SelectCell
-          exposed={true}
+          exposed={!loading}
           focused={false}
           selected={selectedItems.size > 0}
           onSelect={e => dispatchSelected({ type: 'select-all', event: e })}
@@ -109,18 +110,12 @@ function DiscoverSchedulesTable({ schedules, loading }) {
 export default function DiscoverSchedules() {
   let pageType = usePageType();
   let history = useHistory();
-  let [schedules, setSchedules] = useState();
+  let { data: schedules = [], isLoading } =
+    useSendPlatformRequest('schedule/discover');
   let [creating, setCreating] = useState(false);
 
   let selectedInst = useSelected('discover-schedules', schedules, []);
 
-  useEffect(() => {
-    async function run() {
-      setSchedules(await send('schedule/discover'));
-    }
-    run();
-  }, []);
-
   async function onCreate() {
     let selected = schedules.filter(s => selectedInst.items.has(s.id));
     setCreating(true);
@@ -165,10 +160,7 @@ export default function DiscoverSchedules() {
       </P>
 
       <SelectedProvider instance={selectedInst}>
-        <DiscoverSchedulesTable
-          loading={schedules == null}
-          schedules={schedules}
-        />
+        <DiscoverSchedulesTable loading={isLoading} schedules={schedules} />
       </SelectedProvider>
 
       <Stack

packages/desktop-client/src/hooks/useSendPlatformRequest.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+import { send } from 'loot-core/src/platform/client/fetch';
+import type { Handlers } from 'loot-core/src/types/handlers';
+
+export default function useSendPlatformRequest<K extends keyof Handlers>(
+  name: K,
+  args?: Parameters<Handlers[K]>[0],
+  options?: { catchErrors?: boolean },
+) {
+  const [data, setData] = useState<unknown>(null);
+  const [isLoading, setIsLoading] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    async function run() {
+      setIsLoading(true);
+      setData(await send(name, args, options));
+      setIsLoading(false);
+    }
+
+    run();
+  }, [name, args, options]);
+
+  return {
+    data,
+    isLoading,
+  };
+}

upcoming-release-notes/1136.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix "find schedules" page crashing if interction is made before loading data finishes