Skip to content

perf: preload SVG sprite to eliminate icon flash (#11) #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taearls merged 2 commits into from
Nov 24, 2025
Merged

perf: preload SVG sprite to eliminate icon flash (#11) #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
839c202
perf: preload SVG sprite to eliminate icon flash (#11)
taearls Nov 24, 2025
faefa38
style: fix prettier formatting violations
taearls Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 76 additions & 30 deletions ROADMAP.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

## Executive Summary

This roadmap outlines the development plan for Tyler Earls' portfolio website, focusing on performance optimization, modern React tooling, and enhanced user experience. The project has **completed Phase 5 (React Compiler Integration)** and **Phase 6 (CI/CD setup)**, and is now working through **Phase 7 (UI/UX Enhancements)** with 10 open issues.
This roadmap outlines the development plan for Tyler Earls' portfolio website, focusing on performance optimization, modern React tooling, and enhanced user experience. The project has **completed Phase 5 (React Compiler Integration)** and **Phase 6 (CI/CD setup)**, and is now working through **Phase 7 (UI/UX Enhancements)** with 9 open issues.

**Current Focus**: Accessibility & Core Web Vitals complete! Issues #61 (WCAG AA contrast), #62 (touch target sizes), and #63 (CLS on mobile) completed! Moving to performance optimizations (#11, #27).
**Current Focus**: Accessibility & Core Web Vitals complete! Issues #61 (WCAG AA contrast), #62 (touch target sizes), and #63 (CLS on mobile) completed! SVG sprite preloading (#11) implemented! Moving to route lazy loading (#27).

---

Expand All @@ -21,7 +21,7 @@ This roadmap outlines the development plan for Tyler Earls' portfolio website, f

## Open Issues Summary

### Priority Breakdown (10 Total - 3 Completed)
### Priority Breakdown (9 Total - 4 Completed)

#### 🔴 Critical Priority (0 issues)

Expand All @@ -33,10 +33,9 @@ This roadmap outlines the development plan for Tyler Earls' portfolio website, f

✅ **#63** - Fix Cumulative Layout Shift (CLS) on Mobile - **COMPLETED Nov 23, 2025**

#### 🟢 Medium Priority (3 issues) - Effort: ~8-14 hours
#### 🟢 Medium Priority (2 issues) - Effort: ~11-13 hours

- **#11** - Preload Sprite SVG in development and production - _~1-2 hours_
- Impact: Performance - eliminate icon flash on page load
✅ **#11** - Preload Sprite SVG in development and production - **COMPLETED Nov 24, 2025**

- **#14** - Add Working Email Contact Form - _~1-2 days_
- Impact: User engagement and professional contact method
Expand Down Expand Up @@ -174,12 +173,19 @@ _Successfully migrated to TailwindCSS v4 with modern config_
- Changes: Optimized font loading, added aspect ratios, implemented CSS containment
- Result: CLS reduced to < 0.1 on mobile viewports (target achieved)

4. ✅ **#11** - Preload Sprite SVG in development and production - **COMPLETED**
- Priority: 🟢 MEDIUM
- Status: Completed Nov 24, 2025
- Effort: ~30 minutes (actual)
- Changes: Added preload link tag with proper SVG MIME type to index.html
- Result: SVG sprite now preloaded, eliminating icon flash on page load

**Next Up**:

4. **#11** - Preload Sprite SVG in development and production - **START NEXT**
5. **#27** - UI - Lazy Load Routes with React Router - **START NEXT**
- Priority: 🟢 MEDIUM
- Effort: ~1-2 hours
- Impact: Performance - eliminate icon flash
- Effort: ~3-5 hours
- Impact: Performance - reduce initial bundle size through code splitting

**Recent Sprint Completed (Oct 30 - Nov 13, 2025)**:

Expand Down Expand Up @@ -245,21 +251,15 @@ _Successfully migrated to TailwindCSS v4 with modern config_
- Features: Parallel execution, artifact upload, branch protection docs
- Result: Phase 6 core complete - automated quality gates in place

**Next Up (After Critical Fixes)**:
**Next Up (After Performance Optimization)**:

1. 🎯 **#11** - Preload Sprite SVG in development and production
- Effort: ~1-2 hours
- Impact: Performance - eliminate icon flash
- Phase: 7 (UI/UX Enhancements)
- Status: Ready to start

2. 🎯 **#27** - UI - Lazy Load Routes with React Router
1. 🎯 **#27** - UI - Lazy Load Routes with React Router
- Effort: ~3-5 hours
- Impact: Performance - reduced initial bundle size
- Phase: 7 (UI/UX Enhancements)
- Status: Ready to start

3. 🎯 **#14** - Add Working Email Contact Form
2. 🎯 **#14** - Add Working Email Contact Form
- Effort: ~1-2 days
- Impact: User engagement
- Phase: 7 (UI/UX Enhancements)
Expand Down Expand Up @@ -294,8 +294,8 @@ Phase 7: Accessibility & Core Web Vitals ✅ COMPLETE
└── 🔵 #65 Font size readability (1-2h) - ENHANCEMENT

Phase 7: Performance & UX (CURRENT FOCUS)
├── #11 SVG Preloading (1-2h) - Performance - NEXT
├── #27 Lazy Routes (3-5h) - Performance
├── ✅ #11 SVG Preloading (30min) - COMPLETED
├── #27 Lazy Routes (3-5h) - Performance - NEXT
└── #14 Contact Form (1-2 days) - User engagement

Phase 8: Research (Anytime)
Expand Down Expand Up @@ -366,30 +366,30 @@ _None - All prerequisites for #43 are complete. Ready to implement._

## Issue Status Summary

| Priority | Open | In Progress | Closed (This Sprint) | Total Open |
| ----------- | ------ | ----------- | -------------------- | ---------- |
| 🔴 Critical | 0 | 0 | 1 | 0 |
| 🟡 High | 0 | 0 | 9 | 0 |
| 🟢 Medium | 3 | 0 | 2 | 3 |
| 🔵 Low | 7 | 0 | 0 | 7 |
| **TOTAL** | **10** | **0** | **12** | **10** |
| Priority | Open | In Progress | Closed (This Sprint) | Total Open |
| ----------- | ----- | ----------- | -------------------- | ---------- |
| 🔴 Critical | 0 | 0 | 1 | 0 |
| 🟡 High | 0 | 0 | 9 | 0 |
| 🟢 Medium | 2 | 0 | 3 | 2 |
| 🔵 Low | 7 | 0 | 0 | 7 |
| **TOTAL** | **9** | **0** | **13** | **9** |

### Issues by Category

**React Compiler** (0 open, 5 closed): Closed: #38 (epic), #39, #40, #41, #42, #43, #44
**Bugs** (0 open, 1 closed): Closed: #51 (navigation header overflow)
**CI/CD** (0 open, 1 closed): Closed: #18 (GitHub Actions pipeline)
**Accessibility** (2 open, 3 closed): Open: #64, #65 | Closed: #61 (navigation contrast), #62 (touch targets), #63 (CLS mobile)
**UI/UX** (6 open, 2 closed): Open: #10, #11, #13, #14, #15, #27 | Closed: #58 (left-align text), #28 (React 19 Meta)
**UI/UX** (5 open, 3 closed): Open: #10, #13, #14, #15, #27 | Closed: #58 (left-align text), #28 (React 19 Meta), #11 (SVG preload)
**Research** (2 open): #33, #34

### Effort Distribution (Open Issues Only)

| Effort Level | Count | Issues |
| ------------- | ----- | ------------------------------ |
| Small (< 2h) | 4 | #11, #13, #33, #34, #65 |
| Small (< 2h) | 4 | #13, #33, #34, #65 |
| Medium (2-8h) | 3 | #64, #27, #10 |
| Large (> 8h) | 3 | #14 (1-2 days), #15 (1-2 days) |
| Large (> 8h) | 2 | #14 (1-2 days), #15 (1-2 days) |

**Note**: Issue #14 categorized as Large based on 1-2 days estimate (~8-16 hours total effort).

Expand Down Expand Up @@ -456,6 +456,52 @@ _None - All prerequisites for #43 are complete. Ready to implement._

## Changelog

### 2025-11-24 - Issue #11 Completed: SVG Sprite Preloading

- **Completed**: #11 - Preload Sprite SVG in development and production
- **Priority**: 🟢 MEDIUM (GitHub labels: `type: bug`, `type: performance`, `priority: medium`)
- **Status**: Completed Nov 24, 2025
- **Effort**: ~30 minutes (well under 1-2 hour estimate)
- **Impact**: Performance optimization - eliminates icon flash on initial page load

**Implementation Details**:

1. **SVG Sprite Preload** (`index.html:84-85`)
- Uncommented and updated existing preload link for `/icons/sprite.svg`
- Added proper MIME type: `type="image/svg+xml"`
- Positioned after font preloads for optimal resource prioritization
- Browser now fetches sprite SVG during HTML parsing, before icon components render

**Changes**:

```html
<!-- Preload SVG sprite to prevent icon flash on page load -->
<link rel="preload" href="/icons/sprite.svg" as="image" type="image/svg+xml" />
```

**Files Modified**:

- `index.html` - Added SVG sprite preload link

**Testing**:

- ✅ All 141 unit tests passing
- ✅ Production build successful
- ✅ No regressions in development or production builds

**Performance Impact**:

- **Before**: SVG sprite loaded on-demand when first icon component renders, causing visible icon flash
- **After**: SVG sprite preloaded during HTML parsing, ready when icon components render
- **Result**: Eliminated icon flash, smoother initial page render

**Technical Context**:
The SvgIcon component (`src/components/SvgIcon/SvgIcon.tsx:38`) uses `<use href="/icons/sprite.svg#${name}">` to reference icon symbols. Without preloading, the browser must fetch the sprite file on-demand, causing a visible flash as icons load. Preloading ensures the sprite is available immediately when components render.

**Next Actions**: Proceed with #27 (Lazy Load Routes with React Router)

---

### 2025-11-23 - Issue #63 Completed: Fix Cumulative Layout Shift on Mobile

- **Completed**: #63 - Fix Cumulative Layout Shift (CLS) on Mobile
Expand Down
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,13 @@
id="fonts"
as="style"
/> -->
<!-- <link rel="preload" href="icons/sprite.svg" id="sprite" as="image" /> -->
<!-- Preload SVG sprite to prevent icon flash on page load -->
<link
rel="preload"
href="/icons/sprite.svg"
as="image"
type="image/svg+xml"
/>
<!-- <link
rel="preload"
href="src/styles/globals.css"
Expand Down