From 9b4f1ba7bde8a6ea8b517bc03f15484b3aee4be9 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 18 May 2025 09:07:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E5=85=B3=E4=BA=A7=E5=93=81=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/screens/ProductDetailScreen.tsx | 31 +++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

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) => (
+      <View style={styles.productCard} key={`skeleton-${index}`}>
+        <View style={[styles.cardContainerWithPrice, styles.skeletonBox]} />
+        <View style={styles.priceContainerFlex}>
+          <View style={[styles.skeletonText, { width: 50 }]} />
+          <View style={[styles.skeletonText, { width: 30, marginLeft: 5 }]} />
+        </View>
+      </View>
+    ));
+  };
+
   return (
     <View style={{ flex: 1 }}>
       {isLoading ? (
@@ -726,7 +740,7 @@ export const ProductDetailScreen = () => {
                     showsHorizontalScrollIndicator={false}
                     contentContainerStyle={styles.productGridContainer}
                   >
-                    {isSimilarsFlag &&
+                    {isSimilarsFlag ? 
                       similars?.map((item) => (
                         <TouchableOpacity
                           style={styles.productCard}
@@ -748,7 +762,9 @@ export const ProductDetailScreen = () => {
                             </Text>
                           </View>
                         </TouchableOpacity>
-                      ))}
+                      )) 
+                      : renderSkeletonItems()
+                    }
                   </ScrollView>
                 </View>
                 <View style={{ width: "100%" }}>
@@ -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,
+  },
 });