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

package/src/components/Content/Card/Styles/RotateInOut.tsx

@@ -24,6 +24,7 @@ import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 import type {
   IGetSectionData,
   ISectionContent,
@@ -149,13 +150,11 @@ const RotateCarousel: React.FC<Props> = ({
   );
 
   // Memoized skeleton items
-  const skeletonItems = useMemo(() => {
-    const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
-    return Array.from({ length: count }, (_, i) => ({
-      _id: `skeleton-${i}`,
-      isSkeleton: true,
-    }));
-  }, [isLoading, isPaginating, skeletonCount]);
+  const skeletonCountMemo = useMemo(
+    () => (isLoading ? skeletonCount : isPaginating ? 1 : 0),
+    [isLoading, isPaginating, skeletonCount]
+  );
+  const skeletonItems = useSkeletonItems(skeletonCountMemo);
 
   // Optimized finalData to avoid unnecessary spread
   const finalData = useMemo(
@@ -167,7 +166,6 @@ const RotateCarousel: React.FC<Props> = ({
           : data,
     [isLoading, data, skeletonItems]
   );
-
   // Debounced loadMoreData to prevent excessive calls
   const debouncedLoadMore = useMemo(
     () =>
@@ -297,7 +295,7 @@ const RotateCarousel: React.FC<Props> = ({
         data={finalData as any}
         vertical={false}
         renderItem={renderItem}
-        firstItem={1}
+        firstItem={2}
         inactiveSlideOpacity={0.6}
         inactiveSlideScale={0.9}
         sliderWidth={width}

package/src/components/Content/Card/components/CardPoster.tsx

@@ -3,7 +3,7 @@
  * @lastModified Sat 25 Oct 2025 at 04:01 PM
  */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
   type ResizeMode,
@@ -17,6 +17,9 @@ import type { ITheme } from '../../../../theme/themes';
 import RentOrBuyIcon from './RentOrBuyIcon';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
+// Module-level cache to track successfully loaded images
+const loadedImageCache = new Set<string>();
+
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
   posterUri: string;
@@ -50,19 +53,51 @@ const CardPoster: React.FC<CardPosterProps> = ({
     );
   }, [posterUri]);
 
+  // Reset image loading state when isLoading prop changes
   useEffect(() => {
-    if (hasValidPoster) {
+    if (isLoading) {
       setImageLoading(true);
       setImageError(false);
-      FastImage.preload([{ uri: posterUri }]);
+    }
+  }, [isLoading]);
+
+  useEffect(() => {
+    if (hasValidPoster) {
+      // Check if this image was already loaded successfully before
+      const isAlreadyLoaded = loadedImageCache.has(posterUri);
+
+      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: posterUri }]);
+      }
     } else {
       setImageLoading(false);
       setImageError(true);
     }
   }, [posterUri, hasValidPoster]);
 
-  const showSkeleton =
-    isLoading || (imageLoading && !imageError && hasValidPoster);
+  const showSkeleton = useMemo(
+    () => isLoading || (imageLoading && !imageError && hasValidPoster),
+    [isLoading, imageLoading, imageError, hasValidPoster]
+  );
+
+  // 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,
+    }),
+    [theme.colors]
+  );
 
   const fallbackImageStyle: ImageStyle = useMemo(
     () => ({
@@ -76,14 +111,90 @@ const CardPoster: React.FC<CardPosterProps> = ({
     [borderRadius]
   );
 
+  // Memoize FastImage source
+  const imageSource = useMemo(
+    () => ({
+      uri: posterUri,
+      cache: FastImage.cacheControl.immutable,
+      priority: FastImage.priority.normal,
+    }),
+    [posterUri]
+  );
+
+  // Memoize callback handlers
+  const handleLoadStart = useCallback(() => {
+    // Only set loading if image is not already in cache
+    if (!loadedImageCache.has(posterUri)) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [posterUri]);
+
+  const handleLoad = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+    // Add to cache when successfully loaded
+    loadedImageCache.add(posterUri);
+  }, [posterUri]);
+
+  const handleError = useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
+
+  // Memoize wrapper style
+  const wrapperStyle = useMemo(
+    () => [
+      styles.posterWrapper,
+      { borderRadius, backgroundColor: themeColors.background },
+      posterWrapperStyle,
+    ],
+    [borderRadius, themeColors.background, posterWrapperStyle]
+  );
+
+  // Memoize skeleton wrapper style
+  const skeletonWrapperStyle = useMemo(
+    () => [styles.skeletonWrapper, { borderRadius }],
+    [borderRadius]
+  );
+
+  // Memoize skeleton item style
+  const skeletonItemStyle = useMemo(
+    () => [styles.skeleton, { borderRadius }],
+    [borderRadius]
+  );
+
+  // Memoize image style array
+  const imageStyleArray = useMemo(
+    () => [
+      fallbackImageStyle,
+      showSkeleton ? styles.hidden : styles.visible,
+      imageStyle,
+    ],
+    [fallbackImageStyle, showSkeleton, imageStyle]
+  );
+
+  // Memoize fallback wrapper style
+  const fallbackWrapperStyle = useMemo(
+    () => [
+      styles.fallbackWrapper,
+      {
+        borderRadius,
+        backgroundColor: themeColors.background,
+        borderColor: themeColors.error,
+      },
+    ],
+    [borderRadius, themeColors.background, themeColors.error]
+  );
+
+  // Memoize fallback inner style
+  const fallbackInnerStyle = useMemo(
+    () => [styles.fallback, { backgroundColor: themeColors.errorContainer }],
+    [themeColors.errorContainer]
+  );
+
   return (
-    <View
-      style={[
-        styles.posterWrapper,
-        { borderRadius, backgroundColor: theme.colors.background },
-        posterWrapperStyle,
-      ]}
-    >
+    <View style={wrapperStyle}>
       {!showSkeleton && content_offering_type && (
         <RentOrBuyIcon
           theme={theme}
@@ -92,60 +203,30 @@ const CardPoster: React.FC<CardPosterProps> = ({
         />
       )}
       {showSkeleton && (
-        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+        <View style={skeletonWrapperStyle}>
           <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
+            backgroundColor={themeColors.skeletonBaseColor}
+            highlightColor={themeColors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item
-              style={[styles.skeleton, { borderRadius }]}
-            />
+            <SkeletonPlaceholder.Item style={skeletonItemStyle} />
           </SkeletonPlaceholder>
         </View>
       )}
       {hasValidPoster && (
         <FastImage
-          source={{
-            uri: posterUri,
-            cache: FastImage.cacheControl.immutable,
-            priority: FastImage.priority.normal,
-          }}
-          style={[
-            fallbackImageStyle,
-            showSkeleton ? styles.hidden : styles.visible,
-            imageStyle,
-          ]}
+          source={imageSource}
+          style={imageStyleArray}
           resizeMode={resizeMode}
-          onLoadStart={() => {
-            setImageLoading(true);
-            setImageError(false);
-          }}
-          onLoad={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
+          onLoadStart={handleLoadStart}
+          onLoad={handleLoad}
+          onError={handleError}
         />
       )}
       {!showSkeleton && (!hasValidPoster || imageError) && (
-        <View
-          style={[
-            styles.fallbackWrapper,
-            {
-              borderRadius,
-              backgroundColor: theme.colors.background,
-              borderColor: theme.colors.error,
-            },
-          ]}
-        >
-          <View
-            style={[
-              styles.fallback,
-              { backgroundColor: theme.colors.errorContainer },
-            ]}
-          >
-            <ImageOff size={scale(18)} color={theme.colors.error} />
-            <Text style={styles.fallbackText} color={theme.colors.error}>
+        <View style={fallbackWrapperStyle}>
+          <View style={fallbackInnerStyle}>
+            <ImageOff size={scale(18)} color={themeColors.error} />
+            <Text style={styles.fallbackText} color={themeColors.error}>
               Image Failed
             </Text>
           </View>

package/src/components/Content/Card/components/RentOrBuyIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { scale } from 'react-native-size-matters';
@@ -13,30 +13,34 @@ interface RentOrBuyIconProps {
   size?: number;
 }
 
-const PremiumIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
-    <Path
-      transform="translate(507,81)"
-      d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
-      fill={fillColor}
-    />
-    <Path
-      transform="translate(785,818)"
-      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}
-    />
-  </Svg>
+const PremiumIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
+      <Path
+        transform="translate(507,81)"
+        d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
+        fill={fillColor}
+      />
+      <Path
+        transform="translate(785,818)"
+        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}
+      />
+    </Svg>
+  )
 );
 
-const BuyOrRentIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
-    <Path
-      fill={fillColor}
-      fillRule="evenodd"
-      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"
-    />
-  </Svg>
+const BuyOrRentIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
+      <Path
+        fill={fillColor}
+        fillRule="evenodd"
+        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"
+      />
+    </Svg>
+  )
 );
 
 const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
@@ -46,14 +50,22 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   position = 'topLeft',
   size = 22,
 }) => {
-  if (!content_offering_type) return null;
+  const typeUpper = useMemo(
+    () => content_offering_type?.toUpperCase(),
+    [content_offering_type]
+  );
 
-  const typeUpper = content_offering_type.toUpperCase();
-  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
+  const isValidType = useMemo(
+    () => typeUpper && ['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper),
+    [typeUpper]
+  );
 
-  const fillColor = theme?.colors.premiumIcon || '#CA091E';
+  const fillColor = useMemo(
+    () => theme?.colors.premiumIcon || '#CA091E',
+    [theme?.colors.premiumIcon]
+  );
 
-  const positionStyle: ViewStyle = (() => {
+  const positionStyle = useMemo<ViewStyle>(() => {
     switch (position) {
       case 'topLeft':
         return { top: 6, left: 6 };
@@ -66,18 +78,26 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
       default:
         return { top: 6, left: 6 };
     }
-  })();
+  }, [position]);
+
+  const IconComponent = useMemo(
+    () => (typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon),
+    [typeUpper]
+  );
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { width: size, height: size },
+      style || positionStyle,
+    ],
+    [size, style, positionStyle]
+  );
 
-  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+  if (!content_offering_type || !isValidType) return null;
 
   return (
-    <View
-      style={[
-        styles.container,
-        { width: size, height: size },
-        style || positionStyle,
-      ]}
-    >
+    <View style={containerStyle}>
       <View style={styles.iconWrapper}>
         <IconComponent fillColor={fillColor} />
       </View>
@@ -85,7 +105,7 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   );
 };
 
-export default RentOrBuyIcon;
+export default React.memo(RentOrBuyIcon);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Content/Card/components/ThumbnailCard.tsx

@@ -3,7 +3,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, type StyleProp, type ViewStyle } from 'react-native';
 import type {
   ImageStyle as FastImageStyle,
@@ -17,6 +17,9 @@ import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
+// Module-level cache to track successfully loaded images
+const loadedImageCache = new Set<string>();
+
 export type ThumbnailCardProps = {
   thumbnailUri?: string;
   theme: ITheme;
@@ -39,32 +42,121 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
 
-  const hasValidThumbnail = !!thumbnailUri && thumbnailUri.startsWith('http');
-  const showSkeleton = isLoading || (imageLoading && !imageError);
+  const hasValidThumbnail = useMemo(
+    () => !!thumbnailUri && thumbnailUri.startsWith('http'),
+    [thumbnailUri]
+  );
 
-  const fallbackImageStyle: FastImageStyle = {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    borderRadius,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  };
+  // 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<FastImageStyle>(
+    () => ({
+      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 (
-    <View
-      style={[
-        styles.thumbnailWrapper,
-        {
-          borderRadius,
-          backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow,
-        },
-        wrapperStyle,
-      ]}
-    >
+    <View style={wrapperStyleMemo}>
       {showSkeleton && (
-        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+        <View style={skeletonWrapperStyle}>
           <SkeletonPlaceholder
             backgroundColor={theme.colors.skeletonBaseColor}
             highlightColor={theme.colors.skeletonHighlightColor}
@@ -79,35 +171,16 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
       {hasValidThumbnail && (
         <FastImage
           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) && (
-        <View
-          style={[
-            styles.fallback,
-            {
-              borderRadius,
-              backgroundColor: theme.colors.errorContainer,
-              borderColor: theme.colors.error,
-            },
-          ]}
-        >
+        <View style={fallbackStyle}>
           <ImageOff size={scale(18)} color={theme.colors.error} />
           <Text style={styles.fallbackText} color={theme.colors.error}>
             Image Failed
@@ -118,6 +191,8 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   );
 };
 
+export default React.memo(ThumbnailCard);
+
 const styles = StyleSheet.create({
   thumbnailWrapper: {
     width: '100%',