refactor: add loading attribute to images in ArticleItem and FeedItemImage components

Author: medyo

src/features/cards/components/producthuntCard/ArticleItem.tsx

@@ -5,18 +5,16 @@ import { Attributes } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Article, BaseItemPropsType } from 'src/types'
 
-const ArticleItem = ({ item, index, analyticsTag }: BaseItemPropsType<Article>) => {
+const ArticleItem = ({ item, analyticsTag }: BaseItemPropsType<Article>) => {
   const { listingMode } = useUserPreferences()
 
   return (
     <CardItemWithActions
       source={analyticsTag}
-      index={index}
-      key={index}
       item={{ ...item, title: item.title }}
       cardItem={
         <div className="phItem">
-          <img className="phImage" src={item.image_url} alt={item.title} />
+          <img className="phImage" loading="lazy" src={item.image_url} alt={item.title} />
           <div className="phContent">
             <CardLink
               link={item.url}

src/features/feed/components/FeedItemImage.tsx

@@ -11,7 +11,7 @@ export const FeedItemImage = ({ imageUrl, fallbackImage }: FeedItemImageProps) =
 
   if (hasError || !imageUrl) {
     if (typeof fallbackImage === 'string') {
-      return <img src={fallbackImage} className="rowCover" alt="" />
+      return <img src={fallbackImage} loading="lazy" className="rowCover" alt="" />
     } else {
       return (
         fallbackImage || (