Smoother movements reload

moneymgr_web/src/routes/AccountRoute.tsx

@@ -6,6 +6,8 @@ import { useParams } from "react-router-dom";
 import { Movement, MovementApi } from "../api/MovementsApi";
 import { useAccounts } from "../hooks/AccountsListProvider";
 import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
 import { AccountWidget } from "../widgets/AccountWidget";
 import { AmountWidget } from "../widgets/AmountWidget";
 import { AsyncWidget } from "../widgets/AsyncWidget";
@@ -13,9 +15,10 @@ import { DateWidget } from "../widgets/DateWidget";
 import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
 import { NewMovementWidget } from "../widgets/NewMovementWidget";
 import { NotFoundRoute } from "./NotFound";
-import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 
 export function AccountRoute(): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
   const { accountId } = useParams();
 
   const loadKey = React.useRef(0);
@@ -26,15 +29,21 @@ export function AccountRoute(): React.ReactElement {
   const [movements, setMovements] = React.useState<Movement[] | undefined>();
 
   const load = async () => {
-    setMovements(undefined);
     setMovements(await MovementApi.GetAccountMovements(account!.id));
   };
 
-  const reload = (skipMovements = false) => {
-    accounts.reloadBalances();
-    if (!skipMovements) {
-      setMovements(undefined);
-      loadKey.current += 1;
+  const reload = async (skipMovements = false) => {
+    try {
+      accounts.reloadBalances();
+      if (!skipMovements) {
+        loadingMessage.show("Refreshing the list of movements");
+        await load();
+      }
+    } catch (e) {
+      console.error("Failed to load list of movements!", e);
+      alert(`Failed to refresh the list of movements! ${e}`);
+    } finally {
+      loadingMessage.hide();
     }
   };