From 000c0063e5b67ec01859a263c456275b7c47aaa4 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Mon, 18 May 2026 07:38:22 +0530 Subject: [PATCH] soft reload --- react-openapi/hooks/useResource.ts | 3 ++- src/Dashboard.tsx | 1 + src/components/Dashboard/Dashboard.models.ts | 1 + src/components/Dashboard/Dashboard.view.tsx | 1 + src/components/HistoryChart/HistoryChart.models.ts | 2 ++ src/components/HistoryChart/HistoryChart.view.tsx | 3 +++ src/components/LatestItems/LatestItems.models.ts | 1 + src/components/LatestItems/LatestItems.tsx | 3 +++ src/components/LatestItems/LatestItems.view.tsx | 3 ++- src/components/ProgressCard/ProgressCard.models.ts | 1 + src/components/ProgressCard/ProgressCard.view.tsx | 2 ++ src/components/ProgressCard/TopTags.tsx | 3 +++ 12 files changed, 22 insertions(+), 2 deletions(-) diff --git a/react-openapi/hooks/useResource.ts b/react-openapi/hooks/useResource.ts index 8934129..715332d 100644 --- a/react-openapi/hooks/useResource.ts +++ b/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(config: ResourceConfig | undefined) { }; }, enabled: !!endpoint, + placeholderData: keepPreviousData, }); // --- READ ONE --- diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx index 324c475..e090cec 100644 --- a/src/Dashboard.tsx +++ b/src/Dashboard.tsx @@ -165,6 +165,7 @@ export default function Dashboard() { diff --git a/src/components/Dashboard/Dashboard.models.ts b/src/components/Dashboard/Dashboard.models.ts index 7032355..4905981 100644 --- a/src/components/Dashboard/Dashboard.models.ts +++ b/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; } diff --git a/src/components/Dashboard/Dashboard.view.tsx b/src/components/Dashboard/Dashboard.view.tsx index 127c308..e7ed7f2 100644 --- a/src/components/Dashboard/Dashboard.view.tsx +++ b/src/components/Dashboard/Dashboard.view.tsx @@ -129,6 +129,7 @@ export default function DashboardView({ toggleComparison={toggleComparison} setSelectedPeriodId={setSelectedPeriodId} setSelectedGroupKey={setSelectedGroupKey} + isFetching={arguments[0].isFetching} /> ); diff --git a/src/components/HistoryChart/HistoryChart.models.ts b/src/components/HistoryChart/HistoryChart.models.ts index cf6e2fc..6a819c8 100644 --- a/src/components/HistoryChart/HistoryChart.models.ts +++ b/src/components/HistoryChart/HistoryChart.models.ts @@ -37,4 +37,6 @@ export interface HistoryChartProps { togglePeriodType: () => void; setSelectedPeriodId: (id: string | null) => void; toggleComparison: () => void; + + isFetching?: boolean; } diff --git a/src/components/HistoryChart/HistoryChart.view.tsx b/src/components/HistoryChart/HistoryChart.view.tsx index 3dd3205..f42c3dd 100644 --- a/src/components/HistoryChart/HistoryChart.view.tsx +++ b/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", }} > diff --git a/src/components/LatestItems/LatestItems.models.ts b/src/components/LatestItems/LatestItems.models.ts index d953bdf..784e35c 100644 --- a/src/components/LatestItems/LatestItems.models.ts +++ b/src/components/LatestItems/LatestItems.models.ts @@ -11,4 +11,5 @@ export interface LatestItemsViewProps { accentColor: string; canExpand: boolean; onExpand: () => void; + isFetching?: boolean; } diff --git a/src/components/LatestItems/LatestItems.tsx b/src/components/LatestItems/LatestItems.tsx index 99c4712..c89438b 100644 --- a/src/components/LatestItems/LatestItems.tsx +++ b/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)} /> ); diff --git a/src/components/LatestItems/LatestItems.view.tsx b/src/components/LatestItems/LatestItems.view.tsx index f29a6ae..e65dcb5 100644 --- a/src/components/LatestItems/LatestItems.view.tsx +++ b/src/components/LatestItems/LatestItems.view.tsx @@ -17,9 +17,10 @@ export default function LatestItemsView({ accentColor, canExpand, onExpand, + isFetching, }: LatestItemsViewProps) { return ( - + Recent Transactions diff --git a/src/components/ProgressCard/ProgressCard.models.ts b/src/components/ProgressCard/ProgressCard.models.ts index c50984c..a4f91f3 100644 --- a/src/components/ProgressCard/ProgressCard.models.ts +++ b/src/components/ProgressCard/ProgressCard.models.ts @@ -7,4 +7,5 @@ export interface ProgressCardProps { compact?: boolean; selected?: boolean; onClick?: () => void; + isFetching?: boolean; } diff --git a/src/components/ProgressCard/ProgressCard.view.tsx b/src/components/ProgressCard/ProgressCard.view.tsx index 172d93b..34472bf 100644 --- a/src/components/ProgressCard/ProgressCard.view.tsx +++ b/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", }} > 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] });