From ef05974a721f133bd17315d7035e7be445e5e23b Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 31 Oct 2025 01:38:49 +0100 Subject: [PATCH] feat: preload images in BlogPostCard for better caching Preload article cover images when BlogPostCard is rendered to ensure they're cached by Service Worker before navigating to the article. This prevents re-fetching images that are already displayed in explore. --- src/components/BlogPostCard.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/BlogPostCard.tsx b/src/components/BlogPostCard.tsx index 6c3814d3..d44db206 100644 --- a/src/components/BlogPostCard.tsx +++ b/src/components/BlogPostCard.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import { Link } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCalendar, faUser, faNewspaper } from '@fortawesome/free-solid-svg-icons' @@ -7,6 +7,7 @@ import { BlogPostPreview } from '../services/exploreService' import { useEventModel } from 'applesauce-react/hooks' import { Models } from 'applesauce-core' import { isKnownBot } from '../config/bots' +import { preloadImage } from '../hooks/useImageCache' interface BlogPostCardProps { post: BlogPostPreview @@ -42,6 +43,14 @@ const BlogPostCard: React.FC = ({ post, href, level, readingP progressColor = 'var(--color-text)' // Neutral text color (started) } + // Preload image when card is rendered to ensure it's cached by Service Worker + // This prevents re-fetching the image when navigating to the article + useEffect(() => { + if (post.image) { + preloadImage(post.image) + } + }, [post.image]) + // Debug log - reading progress shown as visual indicator if (readingProgress !== undefined) { // Reading progress display