soft reload

react-openapi/hooks/useResource.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { api } from "../api/client";
 import { ResourceConfig } from "../types/config";
 import { ConfigContext } from "../providers/ConfigContext";
@@ -26,6 +26,7 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
         };
       },
       enabled: !!endpoint,
+      placeholderData: keepPreviousData,
     });
 
   // --- READ ONE ---

src/Dashboard.tsx

@@ -165,6 +165,7 @@ export default function Dashboard() {
       <ConfigurableDashboard
         config={configuration}
         data={data}
+        isFetching={report.isFetching}
         onModeChange={handleModeChange}
       />
     </Box>

src/components/Dashboard/Dashboard.models.ts

@@ -50,5 +50,6 @@ export interface DashboardConfig {
 export interface DashboardProps {
   config: DashboardConfig;
   data: ReportData;
+  isFetching?: boolean;
   onModeChange?: (state: DashboardState) => void;
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -129,6 +129,7 @@ export default function DashboardView({
                 toggleComparison={toggleComparison}
                 setSelectedPeriodId={setSelectedPeriodId}
                 setSelectedGroupKey={setSelectedGroupKey}
+                isFetching={arguments[0].isFetching}
               />
             </Grid>
           );

src/components/HistoryChart/HistoryChart.models.ts

@@ -37,4 +37,6 @@ export interface HistoryChartProps {
   togglePeriodType: () => void;
   setSelectedPeriodId: (id: string | null) => void;
   toggleComparison: () => void;
+
+  isFetching?: boolean;
 }

src/components/HistoryChart/HistoryChart.view.tsx

@@ -92,6 +92,9 @@ export default function HistoryChartView(props: ViewProps) {
         border: "1px solid",
         borderColor: "divider",
         bgcolor: isDark ? "background.paper" : colorScheme.light,
+        opacity: props.isFetching ? 0.6 : 1,
+        transition: "opacity 0.3s ease",
+        pointerEvents: props.isFetching ? "none" : "auto",
       }}
     >
       <Typography variant="h6" fontWeight={700} gutterBottom>

src/components/LatestItems/LatestItems.models.ts

@@ -11,4 +11,5 @@ export interface LatestItemsViewProps {
   accentColor: string;
   canExpand: boolean;
   onExpand: () => void;
+  isFetching?: boolean;
 }

src/components/LatestItems/LatestItems.tsx

@@ -9,6 +9,7 @@ type Props = {
   selectedPeriodId: string | null;
   selectedGroupKey?: GroupKey | null;
   accentColor: string;
+  isFetching?: boolean;
 };
 
 export default function LatestItems({
@@ -17,6 +18,7 @@ export default function LatestItems({
   selectedPeriodId,
   selectedGroupKey = null,
   accentColor,
+  isFetching,
 }: Props) {
   const [visibleCount, setVisibleCount] = React.useState(5);
 
@@ -38,6 +40,7 @@ export default function LatestItems({
       items={visibleItems}
       accentColor={accentColor}
       canExpand={canExpand}
+      isFetching={isFetching}
       onExpand={() => setVisibleCount((prev) => prev + 5)}
     />
   );

src/components/LatestItems/LatestItems.view.tsx

@@ -17,9 +17,10 @@ export default function LatestItemsView({
   accentColor,
   canExpand,
   onExpand,
+  isFetching,
 }: LatestItemsViewProps) {
   return (
-    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
+    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
       <Box sx={{ mb: 2, px: 2 }}>
         <Typography variant="h6" fontWeight="bold">
           Recent Transactions

src/components/ProgressCard/ProgressCard.models.ts

@@ -7,4 +7,5 @@ export interface ProgressCardProps {
   compact?: boolean;
   selected?: boolean;
   onClick?: () => void;
+  isFetching?: boolean;
 }

src/components/ProgressCard/ProgressCard.view.tsx

@@ -69,6 +69,8 @@ export default function ProgressCardView({
             ? `${baseShadow}, 0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette[colorTheme]?.main || theme.palette.primary.main}` 
             : baseShadow;
         },
+        opacity: arguments[0].isFetching ? 0.6 : 1,
+        pointerEvents: arguments[0].isFetching ? "none" : "auto",
       }}
     >
       <Typography 

src/components/ProgressCard/TopTags.tsx

@@ -11,6 +11,7 @@ type Props = {
   selectedGroupKey?: GroupKey | null;
   setSelectedGroupKey?: (key: GroupKey | null) => void;
   compact?: boolean;
+  isFetching?: boolean;
 };
 
 export default function TopTags({
@@ -20,6 +21,7 @@ export default function TopTags({
   selectedGroupKey,
   setSelectedGroupKey,
   compact = true,
+  isFetching,
 }: Props) {
   const { items, total } = React.useMemo(() => {
     return extractTopTags(reportData, mode, selectedPeriodId);
@@ -48,6 +50,7 @@ export default function TopTags({
             compact={compact}
             colorTheme={mode === "expense" ? "error" : "success"}
             selected={isSelected}
+            isFetching={isFetching}
             onClick={() => {
               if (setSelectedGroupKey) {
                 setSelectedGroupKey(isSelected ? null : { tags: [item.tag] });