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

package/src/components/ContentView/MoreContentList.tsx

@@ -3,7 +3,8 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
+import { useSkeletonItems } from '../../hooks/useSkeletonItems';
 import {
   FlatList,
   StyleSheet,
@@ -45,176 +46,239 @@ const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList as React.ComponentType<FlatListProps<IContentData>>
 );
 
-const MoreContentList: React.FC<Props> = ({
-  headerProps,
-  contentList = [],
-  onItemPress,
-  isLoading = false,
-  error = false,
-  errorText = 'Something went wrong!',
-  theme,
-  moreDataIsLoading = false,
-  onEndReached,
-  skeletonCount = 12,
-  numColumns = 3,
-  footerComponent,
-  refreshing = false,
-  onRefresh,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const onEndReachedCalledDuringMomentum = useRef(false);
-  const isEmpty = !isLoading && (!contentList || contentList.length === 0);
+const MoreContentList: React.FC<Props> = React.memo(
+  ({
+    headerProps,
+    contentList = [],
+    onItemPress,
+    isLoading = false,
+    error = false,
+    errorText = 'Something went wrong!',
+    theme,
+    moreDataIsLoading = false,
+    onEndReached,
+    skeletonCount = 12,
+    numColumns = 3,
+    footerComponent,
+    refreshing = false,
+    onRefresh,
+  }) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+    const onEndReachedCalledDuringMomentum = useRef(false);
 
-  const getErrorMessage = () => {
-    if (typeof error === 'string') return error;
-    if (error instanceof Error) return error.message;
-    return errorText;
-  };
+    // Memoize computed values
+    const isEmpty = useMemo(
+      () => !isLoading && (!contentList || contentList.length === 0),
+      [isLoading, contentList]
+    );
+
+    const errorMessage = useMemo(() => {
+      if (typeof error === 'string') return error;
+      if (error instanceof Error) return error.message;
+      return errorText;
+    }, [error, errorText]);
+
+    // Memoize skeleton items
+    const skeletonItems = useSkeletonItems(skeletonCount);
+
+    // Memoize skeleton data array
+    const skeletonData = useMemo(
+      () => skeletonItems.map((_, index) => ({ _id: `skeleton-${index}` })),
+      [skeletonItems]
+    );
 
-  const keyExtractor = useCallback((item: IContentData, index: number) => {
-    return item._id?.toString() || index.toString();
-  }, []);
+    const keyExtractor = useCallback((item: IContentData, index: number) => {
+      return item._id?.toString() || index.toString();
+    }, []);
 
-  const renderItem = useCallback(
-    ({ item }: { item: IContentData }) => (
-      <View style={styles.cardWrapper}>
-        <TouchableOpacity
-          onPress={() => onItemPress?.(item)}
-          activeOpacity={0.7}
-        >
+    const renderItem = useCallback(
+      ({ item }: { item: IContentData }) => (
+        <View style={styles.cardWrapper}>
+          <TouchableOpacity
+            onPress={() => onItemPress?.(item)}
+            activeOpacity={0.7}
+          >
+            <CardPoster
+              content_offering_type={item.content_offering_type}
+              posterUri={item.poster}
+              borderRadius={5}
+              isLoading={false}
+              theme={appliedTheme}
+              imageStyle={styles.itemContainer}
+            />
+          </TouchableOpacity>
+        </View>
+      ),
+      [onItemPress, appliedTheme]
+    );
+
+    const renderSkeletonItem = useCallback(
+      ({ index }: { index: number }) => (
+        <View style={styles.cardWrapper} key={`skeleton-${index}`}>
           <CardPoster
-            content_offering_type={item.content_offering_type}
-            posterUri={item.poster}
+            posterUri=""
             borderRadius={5}
-            isLoading={false}
+            isLoading={true}
             theme={appliedTheme}
             imageStyle={styles.itemContainer}
           />
-        </TouchableOpacity>
-      </View>
-    ),
-    [onItemPress, appliedTheme]
-  );
+        </View>
+      ),
+      [appliedTheme]
+    );
 
-  const renderSkeletonItem = useCallback(
-    ({ index }: { index: number }) => (
-      <View style={styles.cardWrapper} key={`skeleton-${index}`}>
-        <CardPoster
-          posterUri=""
-          borderRadius={5}
-          isLoading={true}
-          theme={appliedTheme}
-          imageStyle={styles.itemContainer}
-        />
-      </View>
-    ),
-    [appliedTheme]
-  );
+    // Memoize footer component
+    const footerComponentMemo = useMemo(() => {
+      if (footerComponent) return footerComponent;
+      if (moreDataIsLoading) {
+        return (
+          <View style={styles.footerLoading}>
+            <ActivityIndicator size="small" />
+          </View>
+        );
+      }
+      return null;
+    }, [footerComponent, moreDataIsLoading]);
 
-  const renderFooter = () => {
-    if (footerComponent) return footerComponent;
+    // Memoize onEndReached handler
+    const handleEndReached = useCallback(() => {
+      if (
+        !onEndReachedCalledDuringMomentum.current &&
+        onEndReached &&
+        !moreDataIsLoading
+      ) {
+        onEndReached();
+        onEndReachedCalledDuringMomentum.current = true;
+      }
+    }, [onEndReached, moreDataIsLoading]);
 
-    return moreDataIsLoading ? (
-      <View style={styles.footerLoading}>
-        <ActivityIndicator size="small" />
-      </View>
-    ) : null;
-  };
+    // Memoize onMomentumScrollBegin handler
+    const handleMomentumScrollBegin = useCallback(() => {
+      onEndReachedCalledDuringMomentum.current = false;
+    }, []);
+
+    // Memoize content container style
+    const contentContainerStyle = useMemo(
+      () => [
+        styles.listContent,
+        {
+          minHeight: Display.fullHeight - verticalScale(100),
+        },
+      ],
+      []
+    );
+
+    // Memoize header title style
+    const headerTitleStyle = useMemo(
+      () => StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle]),
+      [headerProps?.titleStyle]
+    );
+
+    // Memoize default right icon
+    const defaultRightIcon = useMemo(
+      () => (
+        <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
+      ),
+      [appliedTheme.colors.onBackground]
+    );
+
+    // Memoize skeleton key extractor
+    const skeletonKeyExtractor = useCallback(
+      (_: any, index: number) => `skeleton-${index}`,
+      []
+    );
+
+    // Memoize render content
+    const renderContent = useMemo(() => {
+      if (isLoading) {
+        return (
+          <FlatList
+            data={skeletonData}
+            numColumns={numColumns}
+            keyExtractor={skeletonKeyExtractor}
+            renderItem={renderSkeletonItem}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={contentContainerStyle}
+          />
+        );
+      }
+
+      if (error) {
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.errorText}>{errorMessage}</Text>
+          </View>
+        );
+      }
+
+      if (isEmpty) {
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.emptyText}>No content found</Text>
+          </View>
+        );
+      }
 
-  const renderContent = () => {
-    if (isLoading) {
       return (
-        <FlatList
-          data={Array.from({ length: skeletonCount })}
+        <AnimatedFlatList
+          data={contentList}
           numColumns={numColumns}
-          keyExtractor={(_, index) => `skeleton-${index}`}
-          renderItem={renderSkeletonItem}
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={[
-            styles.listContent,
-            {
-              minHeight: Display.fullHeight - verticalScale(100),
-            },
-          ]}
+          removeClippedSubviews
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          initialNumToRender={6}
+          bounces={false}
+          scrollEventThrottle={16}
+          contentContainerStyle={styles.listContent}
+          ListFooterComponent={footerComponentMemo as React.ReactElement}
+          onEndReachedThreshold={0.7}
+          onEndReached={handleEndReached}
+          onMomentumScrollBegin={handleMomentumScrollBegin}
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          windowSize={5}
+          maxToRenderPerBatch={5}
+          updateCellsBatchingPeriod={50}
         />
       );
-    }
-
-    if (error) {
-      return (
-        <View style={styles.centered}>
-          <Text style={styles.errorText}>{getErrorMessage()}</Text>
-        </View>
-      );
-    }
-
-    if (isEmpty) {
-      return (
-        <View style={styles.centered}>
-          <Text style={styles.emptyText}>No content found</Text>
-        </View>
-      );
-    }
+    }, [
+      isLoading,
+      error,
+      isEmpty,
+      skeletonData,
+      skeletonKeyExtractor,
+      renderSkeletonItem,
+      contentContainerStyle,
+      errorMessage,
+      numColumns,
+      contentList,
+      keyExtractor,
+      renderItem,
+      footerComponentMemo,
+      handleEndReached,
+      handleMomentumScrollBegin,
+      refreshing,
+      onRefresh,
+    ]);
 
     return (
-      <AnimatedFlatList
-        data={contentList}
-        numColumns={numColumns}
-        showsVerticalScrollIndicator={false}
-        removeClippedSubviews
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        initialNumToRender={6}
-        bounces={false}
-        scrollEventThrottle={16}
-        contentContainerStyle={styles.listContent}
-        ListFooterComponent={renderFooter}
-        onEndReachedThreshold={0.7}
-        onEndReached={() => {
-          if (
-            !onEndReachedCalledDuringMomentum.current &&
-            onEndReached &&
-            !moreDataIsLoading
-          ) {
-            onEndReached();
-            onEndReachedCalledDuringMomentum.current = true;
-          }
-        }}
-        onMomentumScrollBegin={() => {
-          onEndReachedCalledDuringMomentum.current = false;
-        }}
-        refreshing={refreshing}
-        onRefresh={onRefresh}
-        windowSize={5}
-        maxToRenderPerBatch={5}
-        updateCellsBatchingPeriod={50}
-      />
+      <View style={{ flex: 1 }}>
+        <AppHeader
+          title="More Content"
+          titleAlign="left"
+          titleStyle={headerTitleStyle}
+          onBackPress={headerProps?.onBackPress || (() => {})}
+          onRightPress={headerProps?.onRightPress || (() => {})}
+          rightIcon={headerProps?.rightIcon || defaultRightIcon}
+          theme={theme}
+          {...headerProps}
+        />
+        {renderContent}
+      </View>
     );
-  };
-
-  return (
-    <View style={{ flex: 1 }}>
-      <AppHeader
-        title="More Content"
-        titleAlign="left"
-        titleStyle={StyleSheet.flatten([
-          styles.headerTitle,
-          headerProps?.titleStyle,
-        ])}
-        onBackPress={headerProps?.onBackPress || (() => {})}
-        onRightPress={headerProps?.onRightPress || (() => {})}
-        rightIcon={
-          headerProps?.rightIcon || (
-            <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
-          )
-        }
-        theme={theme}
-        {...headerProps}
-      />
-      {renderContent()}
-    </View>
-  );
-};
+  }
+);
 
 export default MoreContentList;
 

package/src/components/ContentView/components/AboutSection.tsx

@@ -3,7 +3,8 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import { useRef, useState } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -37,113 +38,151 @@ type Props = {
   };
 };
 
-export const AboutSection = ({
-  theme,
-  title = 'About',
-  release_year,
-  description,
-  isLoading = false,
-  style,
-}: Props) => {
-  const [expanded, setExpanded] = useState(false);
-  const scrollRef = useRef<ScrollView>(null);
-
-  const toggle = () => {
-    if (expanded) {
-      scrollRef.current?.scrollTo({ y: 0, animated: false });
-    }
-    setExpanded((prev) => !prev);
-  };
+export const AboutSection = React.memo(
+  ({
+    theme,
+    title = 'About',
+    release_year,
+    description,
+    isLoading = false,
+    style,
+  }: Props) => {
+    const [expanded, setExpanded] = useState(false);
+    const scrollRef = useRef<ScrollView>(null);
+    const skeletonItems = useSkeletonItems(4);
 
-  if (isLoading || !description) {
-    return (
-      <SkeletonPlaceholder
-        backgroundColor={theme.colors.skeletonBaseColor}
-        highlightColor={theme.colors.skeletonHighlightColor}
-      >
-        <SkeletonPlaceholder.Item
-          paddingHorizontal={scale(12)}
-          marginTop={verticalScale(7)}
+    const toggle = useCallback(() => {
+      if (expanded) {
+        scrollRef.current?.scrollTo({ y: 0, animated: false });
+      }
+      setExpanded((prev) => !prev);
+    }, [expanded]);
+
+    // Memoize show toggle condition
+    const showToggle = useMemo(
+      () => description && description.length > 150,
+      [description]
+    );
+
+    // Memoize container style
+    const containerStyle = useMemo(
+      () => [styles.container, style?.container],
+      [style?.container]
+    );
+
+    // Memoize title style
+    const titleStyleMemo = useMemo(
+      () => [styles.title, style?.title],
+      [style?.title]
+    );
+
+    // Memoize body style
+    const bodyStyleMemo = useMemo(
+      () => [styles.body, style?.body],
+      [style?.body]
+    );
+
+    // Memoize scroll expanded style
+    const scrollExpandedStyleMemo = useMemo(
+      () => [styles.scrollExpanded, style?.scrollExpanded],
+      [style?.scrollExpanded]
+    );
+
+    // Memoize release year style
+    const releaseYearStyleMemo = useMemo(
+      () => [styles.releaseYear, style?.releaseYear],
+      [style?.releaseYear]
+    );
+
+    // Memoize toggle text style
+    const toggleTextStyleMemo = useMemo(
+      () => [
+        styles.toggleText,
+        { color: theme.colors.primary },
+        style?.toggleText,
+      ],
+      [theme.colors.primary, style?.toggleText]
+    );
+
+    if (isLoading || !description) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
         >
           <SkeletonPlaceholder.Item
-            width={scale(70)}
-            height={scale(16)}
-            borderRadius={scale(4)}
-            marginBottom={scale(10)}
-            style={style?.skeletonLine}
-          />
-          {Array.from({ length: 4 }).map((_, idx) => (
+            paddingHorizontal={scale(12)}
+            marginTop={verticalScale(7)}
+          >
             <SkeletonPlaceholder.Item
-              key={idx}
-              width={idx === 3 ? '80%' : idx % 3 === 0 ? '95%' : '100%'}
-              height={scale(14)}
+              width={scale(70)}
+              height={scale(16)}
               borderRadius={scale(4)}
-              marginBottom={scale(6)}
+              marginBottom={scale(10)}
               style={style?.skeletonLine}
             />
-          ))}
-        </SkeletonPlaceholder.Item>
-      </SkeletonPlaceholder>
-    );
-  }
+            {skeletonItems.map((_, idx) => (
+              <SkeletonPlaceholder.Item
+                key={idx}
+                width={idx === 3 ? '80%' : idx % 3 === 0 ? '95%' : '100%'}
+                height={scale(14)}
+                borderRadius={scale(4)}
+                marginBottom={scale(6)}
+                style={style?.skeletonLine}
+              />
+            ))}
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    }
 
-  return (
-    <View style={[styles.container, style?.container]}>
-      <Text color={theme.colors.primary} style={[styles.title, style?.title]}>
-        {title}
-      </Text>
-
-      {/* Release Year */}
-      {release_year && (
-        <Text
-          color={theme.colors.textSecondary}
-          style={[styles.releaseYear, style?.releaseYear]}
-        >
-          Release: <Text color={theme.colors.textPrimary}>{release_year}</Text>
-        </Text>
-      )}
-
-      {!expanded ? (
-        <Text
-          color={theme.colors.textSecondary}
-          style={[styles.body, style?.body]}
-          numberOfLines={5}
-          ellipsizeMode="tail"
-        >
-          {description}
+    return (
+      <View style={containerStyle}>
+        <Text color={theme.colors.primary} style={titleStyleMemo}>
+          {title}
         </Text>
-      ) : (
-        <ScrollView
-          style={[styles.scrollExpanded, style?.scrollExpanded]}
-          showsVerticalScrollIndicator
-          ref={scrollRef}
-          nestedScrollEnabled
-        >
+
+        {/* Release Year */}
+        {release_year && (
+          <Text color={theme.colors.textSecondary} style={releaseYearStyleMemo}>
+            Release:{' '}
+            <Text color={theme.colors.textPrimary}>{release_year}</Text>
+          </Text>
+        )}
+
+        {!expanded ? (
           <Text
             color={theme.colors.textSecondary}
-            style={[styles.body, style?.body]}
+            style={bodyStyleMemo}
+            numberOfLines={5}
+            ellipsizeMode="tail"
           >
             {description}
           </Text>
-        </ScrollView>
-      )}
-
-      {description.length > 150 && (
-        <TouchableOpacity onPress={toggle}>
-          <Text
-            style={[
-              styles.toggleText,
-              { color: theme.colors.primary },
-              style?.toggleText,
-            ]}
+        ) : (
+          <ScrollView
+            style={scrollExpandedStyleMemo}
+            showsVerticalScrollIndicator
+            ref={scrollRef}
+            nestedScrollEnabled
           >
-            {expanded ? 'See less' : 'See more'}
-          </Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
+            <Text color={theme.colors.textSecondary} style={bodyStyleMemo}>
+              {description}
+            </Text>
+          </ScrollView>
+        )}
+
+        {showToggle && (
+          <TouchableOpacity onPress={toggle}>
+            <Text style={toggleTextStyleMemo}>
+              {expanded ? 'See less' : 'See more'}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {