diff --git a/src/components/HabitGrid.jsx b/src/components/HabitGrid.jsx index 69b1954..f344a2d 100644 --- a/src/components/HabitGrid.jsx +++ b/src/components/HabitGrid.jsx @@ -40,9 +40,19 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => { const handleCellClick = async (date) => { const dateStr = formatDate(date); - // Always call toggleCompletion (handles local/remote), then update UI - await toggleCompletion(habit.id, dateStr); + // Optimistically update completions for instant UI + const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]'); + const idx = habits.findIndex(h => h.id === habit.id); + if (idx !== -1) { + const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : []; + const cidx = completions.indexOf(dateStr); + if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr); + habits[idx].completions = completions; + localStorage.setItem('habitgrid_data', JSON.stringify(habits)); + } onUpdate(); + // Sync in background + toggleCompletion(habit.id, dateStr); }; return ( diff --git a/src/components/MiniGrid.jsx b/src/components/MiniGrid.jsx index 7e95a1e..bf372ae 100644 --- a/src/components/MiniGrid.jsx +++ b/src/components/MiniGrid.jsx @@ -69,8 +69,19 @@ const MiniGrid = ({ habit, onUpdate }) => { const dateStr = formatDate(date); const isTodayCell = isToday(date); const wasCompleted = habit.completions.includes(dateStr); - await toggleCompletion(habit.id, dateStr); + // Optimistically update completions for instant UI + const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]'); + const idx = habits.findIndex(h => h.id === habit.id); + if (idx !== -1) { + const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : []; + const cidx = completions.indexOf(dateStr); + if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr); + habits[idx].completions = completions; + localStorage.setItem('habitgrid_data', JSON.stringify(habits)); + } onUpdate(); + // Sync in background + toggleCompletion(habit.id, dateStr); // Only show encouragement toast if validating (adding) today's dot if (isTodayCell && !wasCompleted) { try {