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,
+ },
});