soft reload

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