Skip to content

perf: add stale-while-revalidate in-memory cache for heritage API calls [closes #333]#368

Merged
zigzagdev merged 3 commits into
chore/improve-loading-speedfrom
perf/api-cache
May 22, 2026
Merged

perf: add stale-while-revalidate in-memory cache for heritage API calls [closes #333]#368
zigzagdev merged 3 commits into
chore/improve-loading-speedfrom
perf/api-cache

Conversation

@zigzagdev
Copy link
Copy Markdown
Owner

Summary

  • New src/shared/cache/api-cache.ts: lightweight module-level get/set with 60s TTL
  • useTopPage: serves cached data immediately (no spinner), revalidates in background
  • useHeritageSearchQuery: same SWR pattern keyed by serialized search params
  • No new npm dependencies

Test plan

  • Navigate to top page → navigate away → navigate back: no loading spinner, instant render
  • Same for search results page
  • After 60s, next navigation triggers a fresh fetch
  • TypeScript compiles without errors

🤖 Generated with Claude Code

zigzagdev and others added 3 commits May 22, 2026 08:47
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…alidate in background

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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 1190bda into chore/improve-loading-speed May 22, 2026
1 check passed
@zigzagdev zigzagdev deleted the perf/api-cache branch May 22, 2026 00:37
zigzagdev added a commit that referenced this pull request May 22, 2026
* 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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant