Fix switching budget type requiring hard reload to take effect (#5253)

Fixes #5252

packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 
-import { Button } from '@actual-app/components/button';
+import { ButtonWithLoading } from '@actual-app/components/button';
 import { Text } from '@actual-app/components/text';
 
+import { send } from 'loot-core/platform/client/fetch';
+
 import { Setting } from './UI';
 
 import { Link } from '@desktop-client/components/common/Link';
@@ -11,22 +13,31 @@ import { useSyncedPref } from '@desktop-client/hooks/useSyncedPref';
 
 export function BudgetTypeSettings() {
   const [budgetType = 'envelope', setBudgetType] = useSyncedPref('budgetType');
+  const [isLoading, setIsLoading] = useState(false);
 
-  function onSwitchType() {
-    const newBudgetType = budgetType === 'envelope' ? 'tracking' : 'envelope';
-    setBudgetType(newBudgetType);
+  async function onSwitchType() {
+    setIsLoading(true);
+    try {
+      const newBudgetType = budgetType === 'envelope' ? 'tracking' : 'envelope';
+      setBudgetType(newBudgetType);
+
+      // Reset the budget cache to ensure the server-side budget system is recalculated
+      await send('reset-budget-cache');
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (
     <Setting
       primaryAction={
-        <Button onPress={onSwitchType}>
+        <ButtonWithLoading onPress={onSwitchType} isLoading={isLoading}>
           {budgetType === 'tracking' ? (
             <Trans>Switch to envelope budgeting</Trans>
           ) : (
             <Trans>Switch to tracking budgeting</Trans>
           )}
-        </Button>
+        </ButtonWithLoading>
       }
     >
       <Text>

upcoming-release-notes/5253.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix switching budget type requiring hard reload to take effect.