@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 1.1.3

package/lib/module/components/Content/Card/components/CardPoster.js

@@ -2,10 +2,10 @@
 
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025 at 04:01 PM
+ * @lastModified Wed 24 Dec 2025 at 04:01 PM
  */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -13,101 +13,131 @@ import { scale } from 'react-native-size-matters';
 import { Text } from "../../../Text/index.js";
 import { ImageOff } from 'lucide-react-native';
 import RentOrBuyIcon from "./RentOrBuyIcon.js";
+import { useImageLoader } from "../../../../hooks/index.js";
+import LinearGradient from 'react-native-linear-gradient';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// Rank number styling constants
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RANK_NUMBER_SIZE = scale(40);
+const RANK_NUMBER_BORDER_RADIUS = scale(30);
+const RANK_NUMBER_TEXT_SIZE = RFValue(25);
+const RANK_NUMBER_TEXT_MARGIN_TOP = scale(2);
+const RANK_NUMBER_TEXT_MARGIN_RIGHT = scale(6);
+const GRADIENT_START = {
+  x: 1,
+  y: 0.5
+};
+const GRADIENT_END = {
+  x: 0.5,
+  y: 1
+};
+// ----------------------------------
+// Image Fallback
+// ----------------------------------
+const ImageFallback = /*#__PURE__*/React.memo(({
+  errorColor,
+  bg
+}) => /*#__PURE__*/_jsxs(View, {
+  style: [styles.absolute, styles.center, {
+    backgroundColor: bg
+  }],
+  children: [/*#__PURE__*/_jsx(ImageOff, {
+    size: scale(18),
+    color: errorColor
+  }), /*#__PURE__*/_jsx(Text, {
+    style: styles.fallbackText,
+    color: errorColor,
+    children: "Image Failed"
+  })]
+}));
 const CardPoster = ({
   content_offering_type,
   posterUri,
   theme,
-  isLoading = false,
   borderRadius = scale(6),
   posterWrapperStyle,
   imageStyle,
-  resizeMode = FastImage.resizeMode.cover
+  isLoading = false,
+  resizeMode = FastImage.resizeMode.cover,
+  showRankNumber = false,
+  rankNumber
 }) => {
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
-  const hasValidPoster = useMemo(() => {
-    if (!posterUri || typeof posterUri !== 'string') return false;
-    const cleaned = posterUri.trim();
-    return (cleaned.startsWith('http://') || cleaned.startsWith('https://')) && /\.(jpg|jpeg|png|webp|gif|bmp)$/i.test(cleaned);
-  }, [posterUri]);
-  useEffect(() => {
-    if (hasValidPoster) {
-      setImageLoading(true);
-      setImageError(false);
-      FastImage.preload([{
-        uri: posterUri
-      }]);
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [posterUri, hasValidPoster]);
-  const showSkeleton = isLoading || imageLoading && !imageError && hasValidPoster;
-  const fallbackImageStyle = useMemo(() => ({
+  const {
+    showSkeleton,
+    showFallback,
+    hasValidImage,
+    imageSource,
+    imageLoading,
+    handleLoad,
+    handleError
+  } = useImageLoader({
+    imageUri: posterUri,
+    isLoading
+  });
+
+  // Memoize theme colors
+  const themeColors = useMemo(() => ({
+    background: theme.colors.background,
+    skeletonBaseColor: theme.colors.skeletonBaseColor,
+    skeletonHighlightColor: theme.colors.skeletonHighlightColor,
+    error: theme.colors.error,
+    errorContainer: theme.colors.errorContainer,
+    border: theme.colors.border
+  }), [theme.colors]);
+
+  // Memoize wrapper style
+  const wrapperStyle = useMemo(() => [styles.posterWrapper, {
     width: '100%',
     aspectRatio: 2 / 3,
     borderRadius,
-    position: 'absolute',
-    top: 0,
-    left: 0
-  }), [borderRadius]);
+    backgroundColor: themeColors.background,
+    borderWidth: showSkeleton ? scale(0.5) : showFallback ? scale(0.3) : 0,
+    borderColor: showSkeleton ? themeColors.border : showFallback ? themeColors.error : 'transparent'
+  }, posterWrapperStyle], [borderRadius, themeColors.background, themeColors.border, themeColors.error, showSkeleton, showFallback, posterWrapperStyle]);
+
+  // Memoize skeleton item style
+
+  // Memoize image style array - hide image until it successfully loads
+  const imageStyleArray = useMemo(() => [styles.absolute,
+  // Hide image when skeleton is showing or image is still loading
+  showSkeleton || imageLoading ? styles.hidden : styles.visible, imageStyle], [showSkeleton, imageLoading, imageStyle]);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.posterWrapper, {
-      borderRadius,
-      backgroundColor: theme.colors.background
-    }, posterWrapperStyle],
-    children: [!showSkeleton && content_offering_type && /*#__PURE__*/_jsx(RentOrBuyIcon, {
-      theme: theme,
-      content_offering_type: content_offering_type
+    style: wrapperStyle,
+    children: [!showSkeleton && !showFallback && content_offering_type && /*#__PURE__*/_jsx(RentOrBuyIcon, {
+      content_offering_type: content_offering_type,
+      theme: theme
     }, posterUri), showSkeleton && /*#__PURE__*/_jsx(View, {
-      style: [styles.skeletonWrapper, {
-        borderRadius
-      }],
+      style: [styles.absolute],
       children: /*#__PURE__*/_jsx(SkeletonPlaceholder, {
-        backgroundColor: theme.colors.skeletonBaseColor,
-        highlightColor: theme.colors.skeletonHighlightColor,
+        backgroundColor: themeColors.skeletonBaseColor,
+        highlightColor: themeColors.skeletonHighlightColor,
         children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
-          style: [styles.skeleton, {
-            borderRadius
-          }]
+          width: "100%",
+          height: "100%"
         })
       })
-    }), hasValidPoster && /*#__PURE__*/_jsx(FastImage, {
-      source: {
-        uri: posterUri,
-        cache: FastImage.cacheControl.immutable,
-        priority: FastImage.priority.normal
-      },
-      style: [fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle],
+    }), hasValidImage && !showFallback && /*#__PURE__*/_jsx(FastImage, {
+      source: imageSource,
+      style: imageStyleArray,
       resizeMode: resizeMode,
-      onLoadStart: () => {
-        setImageLoading(true);
-        setImageError(false);
-      },
-      onLoad: () => setImageLoading(false),
-      onError: () => {
-        setImageLoading(false);
-        setImageError(true);
-      }
-    }), !showSkeleton && (!hasValidPoster || imageError) && /*#__PURE__*/_jsx(View, {
-      style: [styles.fallbackWrapper, {
-        borderRadius,
-        backgroundColor: theme.colors.background,
-        borderColor: theme.colors.error
-      }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.fallback, {
-          backgroundColor: theme.colors.errorContainer
-        }],
-        children: [/*#__PURE__*/_jsx(ImageOff, {
-          size: scale(18),
-          color: theme.colors.error
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.fallbackText,
-          color: theme.colors.error,
-          children: "Image Failed"
-        })]
+      onLoad: handleLoad,
+      onError: handleError
+    }, `${posterUri}-image`), !isLoading && !showSkeleton && showFallback && /*#__PURE__*/_jsx(ImageFallback, {
+      errorColor: themeColors.error,
+      bg: themeColors.errorContainer
+    }, `${posterUri}-fallback`), !showSkeleton && showRankNumber && /*#__PURE__*/_jsx(View, {
+      style: styles.numberContainer,
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        colors: theme.colors.backgroundLayoutGradient,
+        start: GRADIENT_START,
+        end: GRADIENT_END,
+        style: [styles.rankNumberBox],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.rankNumberText,
+          color: theme.colors.textPrimary,
+          children: rankNumber ?? ''
+        })
       })
     })]
   });
@@ -115,21 +145,15 @@ const CardPoster = ({
 export default /*#__PURE__*/React.memo(CardPoster);
 const styles = StyleSheet.create({
   posterWrapper: {
-    width: '100%',
-    aspectRatio: 2 / 3,
     overflow: 'hidden',
     position: 'relative'
   },
-  skeletonWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3
+  absolute: {
+    ...StyleSheet.absoluteFillObject
   },
-  skeleton: {
-    width: '100%',
-    aspectRatio: 2 / 3
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   visible: {
     opacity: 1
@@ -141,8 +165,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     borderWidth: scale(1),
     alignItems: 'center',
     justifyContent: 'center'
@@ -151,14 +173,38 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     alignItems: 'center',
     justifyContent: 'center'
   },
   fallbackText: {
     marginTop: scale(4),
     fontSize: 10
+  },
+  numberContainer: {
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    zIndex: 10
+  },
+  rankNumberBox: {
+    width: RANK_NUMBER_SIZE,
+    height: RANK_NUMBER_SIZE,
+    borderTopRightRadius: RANK_NUMBER_BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  rankNumberText: {
+    fontSize: RANK_NUMBER_TEXT_SIZE,
+    fontWeight: '900',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: {
+      width: 1,
+      height: 1
+    },
+    textShadowRadius: 3,
+    marginTop: RANK_NUMBER_TEXT_MARGIN_TOP,
+    marginRight: RANK_NUMBER_TEXT_MARGIN_RIGHT,
+    letterSpacing: 0.5
   }
 });
 //# sourceMappingURL=CardPoster.js.map

package/lib/module/components/Content/Card/components/CardPoster.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","useMemo","View","StyleSheet","FastImage","SkeletonPlaceholder","scale","Text","ImageOff","RentOrBuyIcon","jsx","_jsx","jsxs","_jsxs","CardPoster","content_offering_type","posterUri","theme","isLoading","borderRadius","posterWrapperStyle","imageStyle","resizeMode","cover","imageLoading","setImageLoading","imageError","setImageError","hasValidPoster","cleaned","trim","startsWith","test","preload","uri","showSkeleton","fallbackImageStyle","width","aspectRatio","position","top","left","style","styles","posterWrapper","backgroundColor","colors","background","children","skeletonWrapper","skeletonBaseColor","highlightColor","skeletonHighlightColor","Item","skeleton","source","cache","cacheControl","immutable","priority","normal","hidden","visible","onLoadStart","onLoad","onError","fallbackWrapper","borderColor","error","fallback","errorContainer","size","color","fallbackText","memo","create","overflow","opacity","borderWidth","alignItems","justifyContent","marginTop","fontSize"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/components/CardPoster.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","StyleSheet","FastImage","SkeletonPlaceholder","scale","Text","ImageOff","RentOrBuyIcon","useImageLoader","LinearGradient","RFValue","jsx","_jsx","jsxs","_jsxs","RANK_NUMBER_SIZE","RANK_NUMBER_BORDER_RADIUS","RANK_NUMBER_TEXT_SIZE","RANK_NUMBER_TEXT_MARGIN_TOP","RANK_NUMBER_TEXT_MARGIN_RIGHT","GRADIENT_START","x","y","GRADIENT_END","ImageFallback","memo","errorColor","bg","style","styles","absolute","center","backgroundColor","children","size","color","fallbackText","CardPoster","content_offering_type","posterUri","theme","borderRadius","posterWrapperStyle","imageStyle","isLoading","resizeMode","cover","showRankNumber","rankNumber","showSkeleton","showFallback","hasValidImage","imageSource","imageLoading","handleLoad","handleError","imageUri","themeColors","background","colors","skeletonBaseColor","skeletonHighlightColor","error","errorContainer","border","wrapperStyle","posterWrapper","width","aspectRatio","borderWidth","borderColor","imageStyleArray","hidden","visible","highlightColor","Item","height","source","onLoad","onError","numberContainer","backgroundLayoutGradient","start","end","rankNumberBox","rankNumberText","textPrimary","create","overflow","position","absoluteFillObject","justifyContent","alignItems","opacity","fallbackWrapper","top","left","fallback","marginTop","fontSize","bottom","zIndex","borderTopRightRadius","fontWeight","textShadowColor","textShadowOffset","textShadowRadius","marginRight","letterSpacing"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/components/CardPoster.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Content/Card/components/RentOrBuyIcon.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { scale } from 'react-native-size-matters';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PremiumIcon = ({
+const PremiumIcon = /*#__PURE__*/React.memo(({
   fillColor
 }) => /*#__PURE__*/_jsxs(Svg, {
   viewBox: "0 0 1024 1024",
@@ -20,8 +20,8 @@ const PremiumIcon = ({
     d: "M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z",
     fill: fillColor
   })]
-});
-const BuyOrRentIcon = ({
+}));
+const BuyOrRentIcon = /*#__PURE__*/React.memo(({
   fillColor
 }) => /*#__PURE__*/_jsx(Svg, {
   fill: "none",
@@ -34,7 +34,7 @@ const BuyOrRentIcon = ({
     clipRule: "evenodd",
     d: "M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
   })
-});
+}));
 const RentOrBuyIcon = ({
   theme,
   content_offering_type,
@@ -42,11 +42,10 @@ const RentOrBuyIcon = ({
   position = 'topLeft',
   size = 22
 }) => {
-  if (!content_offering_type) return null;
-  const typeUpper = content_offering_type.toUpperCase();
-  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
-  const fillColor = theme?.colors.premiumIcon || '#CA091E';
-  const positionStyle = (() => {
+  const typeUpper = useMemo(() => content_offering_type?.toUpperCase(), [content_offering_type]);
+  const isValidType = useMemo(() => typeUpper && ['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper), [typeUpper]);
+  const fillColor = useMemo(() => theme?.colors.premiumIcon || '#CA091E', [theme?.colors.premiumIcon]);
+  const positionStyle = useMemo(() => {
     switch (position) {
       case 'topLeft':
         return {
@@ -74,13 +73,15 @@ const RentOrBuyIcon = ({
           left: 6
         };
     }
-  })();
-  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+  }, [position]);
+  const IconComponent = useMemo(() => typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon, [typeUpper]);
+  const containerStyle = useMemo(() => [styles.container, {
+    width: size,
+    height: size
+  }, style || positionStyle], [size, style, positionStyle]);
+  if (!content_offering_type || !isValidType) return null;
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, {
-      width: size,
-      height: size
-    }, style || positionStyle],
+    style: containerStyle,
     children: /*#__PURE__*/_jsx(View, {
       style: styles.iconWrapper,
       children: /*#__PURE__*/_jsx(IconComponent, {
@@ -89,7 +90,7 @@ const RentOrBuyIcon = ({
     })
   });
 };
-export default RentOrBuyIcon;
+export default /*#__PURE__*/React.memo(RentOrBuyIcon);
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',

package/lib/module/components/Content/Card/components/RentOrBuyIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","Svg","Path","scale","jsx","_jsx","jsxs","_jsxs","PremiumIcon","fillColor","viewBox","width","height","children","transform","d","fill","BuyOrRentIcon","fillRule","clipRule","RentOrBuyIcon","theme","content_offering_type","style","position","size","typeUpper","toUpperCase","includes","colors","premiumIcon","positionStyle","top","left","right","bottom","IconComponent","styles","container","iconWrapper","create","zIndex","flex","justifyContent","alignItems","backgroundColor","padding","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","overflow","elevation"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/components/RentOrBuyIcon.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","StyleSheet","Svg","Path","scale","jsx","_jsx","jsxs","_jsxs","PremiumIcon","memo","fillColor","viewBox","width","height","children","transform","d","fill","BuyOrRentIcon","fillRule","clipRule","RentOrBuyIcon","theme","content_offering_type","style","position","size","typeUpper","toUpperCase","isValidType","includes","colors","premiumIcon","positionStyle","top","left","right","bottom","IconComponent","containerStyle","styles","container","iconWrapper","create","zIndex","flex","justifyContent","alignItems","backgroundColor","padding","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","overflow","elevation"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/components/RentOrBuyIcon.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Content/Card/components/ThumbnailCard.js

@@ -5,7 +5,7 @@
  * @lastModified Wed 25 Jun 2025 at 05:40 PM
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -13,7 +13,10 @@ import { scale } from 'react-native-size-matters';
 import { Text } from "../../../Text/index.js";
 import { ImageOff } from 'lucide-react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
+
+// Module-level cache to track successfully loaded images
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const loadedImageCache = new Set();
 export const ThumbnailCard = ({
   thumbnailUri = '',
   theme,
@@ -25,26 +28,82 @@ export const ThumbnailCard = ({
 }) => {
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
-  const hasValidThumbnail = !!thumbnailUri && thumbnailUri.startsWith('http');
-  const showSkeleton = isLoading || imageLoading && !imageError;
-  const fallbackImageStyle = {
+  const hasValidThumbnail = useMemo(() => !!thumbnailUri && thumbnailUri.startsWith('http'), [thumbnailUri]);
+
+  // Reset image loading state when isLoading prop changes
+  useEffect(() => {
+    if (isLoading) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [isLoading]);
+
+  // Reset when thumbnailUri changes
+  useEffect(() => {
+    if (hasValidThumbnail) {
+      // Check if this image was already loaded successfully before
+      const isAlreadyLoaded = loadedImageCache.has(thumbnailUri);
+      if (isAlreadyLoaded) {
+        // Image was loaded before, skip loading state
+        setImageLoading(false);
+        setImageError(false);
+      } else {
+        // Image not loaded before, show loading
+        setImageLoading(true);
+        setImageError(false);
+        FastImage.preload([{
+          uri: thumbnailUri
+        }]);
+      }
+    } else {
+      setImageLoading(false);
+      setImageError(true);
+    }
+  }, [thumbnailUri, hasValidThumbnail]);
+  const showSkeleton = useMemo(() => isLoading || imageLoading && !imageError && hasValidThumbnail, [isLoading, imageLoading, imageError, hasValidThumbnail]);
+  const fallbackImageStyle = useMemo(() => ({
     width: '100%',
     aspectRatio: 16 / 9,
     borderRadius,
     position: 'absolute',
     top: 0,
     left: 0
-  };
+  }), [borderRadius]);
+  const wrapperStyleMemo = useMemo(() => [styles.thumbnailWrapper, {
+    borderRadius,
+    backgroundColor: theme.colors.background,
+    shadowColor: theme.colors.shadow
+  }, wrapperStyle], [borderRadius, theme.colors.background, theme.colors.shadow, wrapperStyle]);
+  const skeletonWrapperStyle = useMemo(() => [styles.skeletonWrapper, {
+    borderRadius
+  }], [borderRadius]);
+  const imageStyleMemo = useMemo(() => [fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle], [fallbackImageStyle, showSkeleton, imageStyle]);
+  const fallbackStyle = useMemo(() => [styles.fallback, {
+    borderRadius,
+    backgroundColor: theme.colors.errorContainer,
+    borderColor: theme.colors.error
+  }], [borderRadius, theme.colors.errorContainer, theme.colors.error]);
+  const handleLoadStart = useCallback(() => {
+    // Only set loading if image is not already in cache
+    if (!loadedImageCache.has(thumbnailUri)) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [thumbnailUri]);
+  const handleLoadEnd = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+    // Add to cache when successfully loaded
+    loadedImageCache.add(thumbnailUri);
+  }, [thumbnailUri]);
+  const handleError = useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.thumbnailWrapper, {
-      borderRadius,
-      backgroundColor: theme.colors.background,
-      shadowColor: theme.colors.shadow
-    }, wrapperStyle],
+    style: wrapperStyleMemo,
     children: [showSkeleton && /*#__PURE__*/_jsx(View, {
-      style: [styles.skeletonWrapper, {
-        borderRadius
-      }],
+      style: skeletonWrapperStyle,
       children: /*#__PURE__*/_jsx(SkeletonPlaceholder, {
         backgroundColor: theme.colors.skeletonBaseColor,
         highlightColor: theme.colors.skeletonHighlightColor,
@@ -58,23 +117,13 @@ export const ThumbnailCard = ({
       source: {
         uri: thumbnailUri
       },
-      style: [fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle],
+      style: imageStyleMemo,
       resizeMode: resizeMode,
-      onLoadStart: () => {
-        setImageLoading(true);
-        setImageError(false);
-      },
-      onLoadEnd: () => setImageLoading(false),
-      onError: () => {
-        setImageLoading(false);
-        setImageError(true);
-      }
+      onLoadStart: handleLoadStart,
+      onLoadEnd: handleLoadEnd,
+      onError: handleError
     }), !showSkeleton && (!hasValidThumbnail || imageError) && /*#__PURE__*/_jsxs(View, {
-      style: [styles.fallback, {
-        borderRadius,
-        backgroundColor: theme.colors.errorContainer,
-        borderColor: theme.colors.error
-      }],
+      style: fallbackStyle,
       children: [/*#__PURE__*/_jsx(ImageOff, {
         size: scale(18),
         color: theme.colors.error
@@ -86,6 +135,7 @@ export const ThumbnailCard = ({
     })]
   });
 };
+export default /*#__PURE__*/React.memo(ThumbnailCard);
 const styles = StyleSheet.create({
   thumbnailWrapper: {
     width: '100%',