相关产品骨架屏

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