[OPTIMIZATION] Avatar Component - Missing Lazy Loading - src/components/Avatar.tsx #69

New issue

Closed

opened 2026-06-06 20:51:27 +00:00 by Mark · 0 comments

Mark commented

2026-06-06 20:51:27 +00:00

Owner

High Issues (1)

Background images load immediately - no lazy loading support
- Current: <div style={{ backgroundImage: url(${photo}) }}>
- Fix: Use <img loading="lazy" src={photo} className="w-full h-full object-cover rounded-full" />
- Impact: Deferred off-screen image loads, faster initial page load, reduced bandwidth

Medium Issues (2)

Multiple full-table .toArray() loads across db.ts (lines 71, 117, 142, 195, 230, 308, 346, 399, 457, 530, 549, 553) and utils.ts
- Fix: Add pagination (limit/offset) or cursor-based iteration for large collections
Toast setTimeout without cleanup - store.ts:570
- Multiple timers queue up if showToast called rapidly
- Fix: Track timer ID in state, clear on hideToast()

## High Issues (1) 1. **Background images load immediately** - no lazy loading support - Current: `<div style={{ backgroundImage: `url(${photo})` }}>` - Fix: Use `<img loading="lazy" src={photo} className="w-full h-full object-cover rounded-full" />` - Impact: Deferred off-screen image loads, faster initial page load, reduced bandwidth ## Medium Issues (2) 2. **Multiple full-table `.toArray()` loads** across `db.ts` (lines 71, 117, 142, 195, 230, 308, 346, 399, 457, 530, 549, 553) and `utils.ts` - Fix: Add pagination (`limit/offset`) or cursor-based iteration for large collections 3. **Toast `setTimeout` without cleanup** - `store.ts:570` - Multiple timers queue up if `showToast` called rapidly - Fix: Track timer ID in state, clear on `hideToast()`