diff --git a/app/screens/ProductDetailScreen.tsx b/app/screens/ProductDetailScreen.tsx index 47c68f6..7e0ffeb 100644 --- a/app/screens/ProductDetailScreen.tsx +++ b/app/screens/ProductDetailScreen.tsx @@ -385,6 +385,20 @@ export const ProductDetailScreen = () => { [navigation] ); + // Add this function to render skeleton UI + const renderSkeletonItems = () => { + // Create an array of 5 skeleton items + return Array(5).fill(0).map((_, index) => ( + + + + + + + + )); + }; + return ( {isLoading ? ( @@ -726,7 +740,7 @@ export const ProductDetailScreen = () => { showsHorizontalScrollIndicator={false} contentContainerStyle={styles.productGridContainer} > - {isSimilarsFlag && + {isSimilarsFlag ? similars?.map((item) => ( { - ))} + )) + : renderSkeletonItems() + } @@ -1503,4 +1519,15 @@ const styles = StyleSheet.create({ fontSize: fontSize(16), color: "#666", }, + skeletonBox: { + backgroundColor: '#e0e0e0', + height: widthUtils(90, 90).height, + width: widthUtils(90, 90).width, + borderRadius: 5, + }, + skeletonText: { + height: 16, + backgroundColor: '#e0e0e0', + borderRadius: 3, + }, });