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

package/src/components/ContentView/components/GenreTags.tsx

@@ -3,7 +3,8 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -30,64 +31,78 @@ type Props = {
   };
 };
 
-export const GenreTags = ({
-  genres,
-  theme,
-  isLoading = false,
-  style,
-}: Props): React.ReactElement => {
-  if (isLoading || !genres?.length) {
-    return (
-      <SkeletonPlaceholder
-        backgroundColor={theme.colors.skeletonBaseColor}
-        highlightColor={theme.colors.skeletonHighlightColor}
-        borderRadius={scale(16)}
-      >
-        <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
-          {[1, 2, 3].map((_, idx) => (
-            <View
-              key={idx}
-              style={StyleSheet.flatten([
-                styles.skeletonTag,
-                style?.skeletonTag,
-              ])}
-            />
-          ))}
-        </View>
-      </SkeletonPlaceholder>
+export const GenreTags = React.memo(
+  ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
+    // Memoize skeleton array
+    const skeletonItems = useSkeletonItems(3, (i) => i + 1);
+
+    // Memoize tag container base style
+    const tagContainerBaseStyle = useMemo(
+      () => ({
+        backgroundColor: theme.colors.surfaceVariant,
+        borderColor: theme.colors.border,
+      }),
+      [theme.colors.surfaceVariant, theme.colors.border]
+    );
+
+    // Memoize tag text style
+    const tagTextStyle = useMemo(
+      () => [
+        styles.tagText,
+        { color: theme.colors.textPrimary },
+        style?.tagText,
+      ],
+      [theme.colors.textPrimary, style?.tagText]
+    );
+
+    // Memoize container style
+    const containerStyleMemo = useMemo(
+      () => StyleSheet.flatten([styles.tagRow, style?.container]),
+      [style?.container]
     );
-  }
 
-  return (
-    <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
-      {genres.map((tag, idx) => (
-        <View
-          key={idx}
-          style={StyleSheet.flatten([
-            styles.tagContainer,
-            {
-              backgroundColor: theme.colors.surfaceVariant,
-              borderColor: theme.colors.border,
-            },
-            style?.tagContainer,
-          ])}
+    if (isLoading || !genres?.length) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+          borderRadius={scale(16)}
         >
-          <Text
+          <View style={containerStyleMemo}>
+            {skeletonItems.map((_, idx) => (
+              <View
+                key={idx}
+                style={StyleSheet.flatten([
+                  styles.skeletonTag,
+                  style?.skeletonTag,
+                ])}
+              />
+            ))}
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={containerStyleMemo}>
+        {genres.map((tag, idx) => (
+          <View
+            key={idx}
             style={StyleSheet.flatten([
-              styles.tagText,
-              { color: theme.colors.textPrimary },
-              style?.tagText,
+              styles.tagContainer,
+              tagContainerBaseStyle,
+              style?.tagContainer,
             ])}
-            numberOfLines={1}
-            ellipsizeMode="tail"
           >
-            {tag?.name || String(tag)}
-          </Text>
-        </View>
-      ))}
-    </View>
-  );
-};
+            <Text style={tagTextStyle} numberOfLines={1} ellipsizeMode="tail">
+              {tag?.name || String(tag)}
+            </Text>
+          </View>
+        ))}
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   tagRow: {