#34

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,6 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { getClientThumbnailMode } from '@/lib/settings'
 import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -29,6 +30,7 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
+  const thumbnailMode = getClientThumbnailMode ()
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -134,7 +136,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      </div>)
 		})}
 
-		{(post.thumbnail || post.thumbnailBase) && (
+		{thumbnailMode !== 'off' && (post.thumbnail || post.thumbnailBase) && (
 		    <motion.div
 			layoutId={`page-${ id }`}
 			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
@@ -145,6 +147,8 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}
+			   loading={thumbnailMode === 'light' ? 'lazy' : 'eager'}
+			   decoding="async"
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}