- Loading bills…
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
Loading bills…
) : active.length === 0 ? (
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index 2db174a..7e340d2 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -6,6 +6,7 @@ import BillModal from '@/components/BillModal';
import { cn, fmt, fmtDate, todayStr } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/Skeleton';
import {
Table, TableHeader, TableBody, TableHead, TableRow, TableCell,
} from '@/components/ui/table';
@@ -1202,7 +1203,7 @@ function MobileTrackerRow({ row, year, month, refresh, index, onEditBill }) {
}
// ── Bucket ─────────────────────────────────────────────────────────────────
-function Bucket({ label, rows, year, month, refresh, onEditBill }) {
+function Bucket({ label, rows, year, month, refresh, onEditBill, loading }) {
// Use actual_amount (if set) as the per-row threshold; exclude skipped rows from totals
const activeRows = rows.filter(r => !r.is_skipped);
const totalThreshold = activeRows.reduce((s, r) => s + (r.actual_amount ?? r.expected_amount ?? 0), 0);
@@ -1249,21 +1250,47 @@ function Bucket({ label, rows, year, month, refresh, onEditBill }) {
-
- {rows.map((r, i) => (
-
- ))}
+
+ {loading ? (
+ Array.from({ length: 3 }).map((_, i) => (
+
+ ))
+ ) : (
+ rows.map((r, i) => (
+
+ ))
+ )}
-
+
@@ -1282,17 +1309,45 @@ function Bucket({ label, rows, year, month, refresh, onEditBill }) {
- {rows.map((r, i) => (
- |
- ))}
+ {loading ? (
+ Array.from({ length: 5 }).map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))
+ ) : (
+ rows.map((r, i) => (
+ |
+ ))
+ )}
@@ -1307,17 +1362,21 @@ export default function TrackerPage() {
const [year, setYear] = useState(now.getFullYear());
const [month, setMonth] = useState(now.getMonth() + 1);
const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
// Edit Bill modal: { bill, categories } when open, null when closed
const [editBillData, setEditBillData] = useState(null);
// Edit Starting Amounts modal: true when open, false when closed
const [editStartingOpen, setEditStartingOpen] = useState(false);
const load = useCallback(async () => {
+ setLoading(true);
try {
const res = await api.tracker(year, month);
setData(res);
} catch (err) {
toast.error(err.message);
+ } finally {
+ setLoading(false);
}
}, [year, month]);
@@ -1399,19 +1458,30 @@ export default function TrackerPage() {
{/* ── Summary cards (backend already excludes skipped from totals) ── */}
-
- setEditStartingOpen(true)}
- />
-
-
-
-
- {summary.trend && }
-
+ {loading ? (
+
+
+
+
+
+
+ {summary.trend && }
+
+ ) : (
+
+ setEditStartingOpen(true)}
+ />
+
+
+
+
+ {summary.trend && }
+
+ )}
{/* ── Empty state ── */}
{rows.length === 0 && data !== null && (
@@ -1427,8 +1497,40 @@ export default function TrackerPage() {
)}
{/* ── Buckets — year and month passed so Row can open the correct monthly state dialog ── */}
- {first.length > 0 &&
}
- {second.length > 0 &&
}
+ {loading && (
+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+
+
+ )}
+ {first.length > 0 &&
}
+ {second.length > 0 &&
}
{/* Edit Bill modal — opened by clicking a bill name in any tracker row */}
{editBillData && (
diff --git a/package.json b/package.json
index 664986e..d234dbb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "bill-tracker",
- "version": "0.21.0",
+ "version": "0.21.1",
"description": "Monthly bill tracking system",
"main": "server.js",
"scripts": {