Skip to content

perf: lazy-load Map and DetailHeritageMap to shrink initial JS bundle [closes #331]#372

Merged
zigzagdev merged 15 commits into
chore/improve-loading-speedfrom
perf/lazy-load-map
May 22, 2026
Merged

perf: lazy-load Map and DetailHeritageMap to shrink initial JS bundle [closes #331]#372
zigzagdev merged 15 commits into
chore/improve-loading-speedfrom
perf/lazy-load-map

Conversation

@zigzagdev
Copy link
Copy Markdown
Owner

@zigzagdev zigzagdev commented May 22, 2026

Summary

  • Converts Map (top page) and DetailHeritageMap (detail page) to React.lazy() with Suspense
  • Reduces initial JS bundle size — map libraries are only loaded when the component is rendered
  • Fallback: animate-pulse skeleton div shown while the chunk loads

Test plan

  • Top page map renders correctly after lazy load
  • Detail page map renders correctly after lazy load
  • Skeleton fallback visible briefly on slow connections

🤖 Generated with Claude Code

zigzagdev and others added 15 commits May 22, 2026 08:47
@zigzagdev @claude
perf: create api-cache utility with TTL-based get/set
8672610 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf: apply SWR cache to useTopPage — serve stale data instantly, rev…
0a5b53d 
…alidate in background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf: apply SWR cache to useHeritageSearchQuery keyed by serialized s…
fc910d5 
…earch params

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(card): add isPriority prop — eager loading and fetchpriority for…
1fad9ee 
… above-fold images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(list): pass isPriority to first 3 cards in HeritageList
84bd1c8 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(search): pass isPriority to first 3 cards in SearchResultsPage
eec7294 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf: create HeritageCardSkeleton component matching thumbnail card d…
9c4b92b 
…imensions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(list): add isLoading prop to HeritageList — show skeleton grid w…
5b44d66 
…hile fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(search): add isLoading prop to SearchResultsPage — show skeleton…
726ca6d 
… grid while fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(container): remove Loading… early return from TopPageContainer —…
28d0f13 
… pass isLoading to HeritageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(container): pass isLoading to SearchResultsPage in SearchHeritag…
a705378 
…eResultsContainer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(top): lazy-load Map component with React.lazy and Suspense pulse…
065286f 
… fallback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
perf(detail): lazy-load DetailHeritageMap with React.lazy and Suspens…
85a27b0 
…e pulse fallback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
fix(card): remove isPriority/fetchPriority/eager loading — caused 403…
f56d85c 
… on UNESCO image URLs

fetchPriority="high" and loading="eager" triggered rate-limiting on UNESCO's
document server. Revert to loading="lazy" for all images. Keep width, height,
and decoding="async" for CLS prevention.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev @claude
fix(card): revert image dimension attrs added for #332
0b5d45d 
Drop decoding="async", width/height hints — image optimization issue
is being closed without implementation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
zigzagdev
zigzagdev commented May 22, 2026
View reviewed changes
Copy link
Copy Markdown
Owner Author

@zigzagdev zigzagdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok 🌱

@zigzagdev zigzagdev merged commit 06c0a88 into chore/improve-loading-speed May 22, 2026
2 checks passed
@zigzagdev zigzagdev deleted the perf/lazy-load-map branch May 22, 2026 00:38
zigzagdev added a commit that referenced this pull request May 22, 2026
@zigzagdev @claude
perf: SWR cache, skeleton loading, lazy-load maps [closes #336] (#373)
440a325 
* perf: add stale-while-revalidate in-memory cache for heritage API calls [closes #333] (#368)

* perf: create api-cache utility with TTL-based get/set

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useTopPage — serve stale data instantly, revalidate in background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useHeritageSearchQuery keyed by serialized search params

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: add skeleton loading state for heritage cards [closes #330] (#370)

* perf: create api-cache utility with TTL-based get/set

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useTopPage — serve stale data instantly, revalidate in background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useHeritageSearchQuery keyed by serialized search params

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(card): add isPriority prop — eager loading and fetchpriority for above-fold images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(list): pass isPriority to first 3 cards in HeritageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(search): pass isPriority to first 3 cards in SearchResultsPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: create HeritageCardSkeleton component matching thumbnail card dimensions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(list): add isLoading prop to HeritageList — show skeleton grid while fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(search): add isLoading prop to SearchResultsPage — show skeleton grid while fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(container): remove Loading… early return from TopPageContainer — pass isLoading to HeritageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(container): pass isLoading to SearchResultsPage in SearchHeritageResultsContainer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: lazy-load Map and DetailHeritageMap to shrink initial JS bundle [closes #331] (#372)

* perf: create api-cache utility with TTL-based get/set

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useTopPage — serve stale data instantly, revalidate in background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: apply SWR cache to useHeritageSearchQuery keyed by serialized search params

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(card): add isPriority prop — eager loading and fetchpriority for above-fold images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(list): pass isPriority to first 3 cards in HeritageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(search): pass isPriority to first 3 cards in SearchResultsPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf: create HeritageCardSkeleton component matching thumbnail card dimensions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(list): add isLoading prop to HeritageList — show skeleton grid while fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(search): add isLoading prop to SearchResultsPage — show skeleton grid while fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(container): remove Loading… early return from TopPageContainer — pass isLoading to HeritageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(container): pass isLoading to SearchResultsPage in SearchHeritageResultsContainer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(top): lazy-load Map component with React.lazy and Suspense pulse fallback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* perf(detail): lazy-load DetailHeritageMap with React.lazy and Suspense pulse fallback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(card): remove isPriority/fetchPriority/eager loading — caused 403 on UNESCO image URLs

fetchPriority="high" and loading="eager" triggered rate-limiting on UNESCO's
document server. Revert to loading="lazy" for all images. Keep width, height,
and decoding="async" for CLS prevention.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(card): revert image dimension attrs added for #332

Drop decoding="async", width/height hints — image optimization issue
is being closed without implementation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@zigzagdev