@lookiero/checkout 8.9.0 → 8.11.0-beta.0

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -1,8 +1,9 @@
 import React, { FC } from "react";
-import { Image, ImageStyle, Pressable, StyleProp, View } from "react-native";
+import { ImageStyle, Pressable, StyleProp, View } from "react-native";
 import { COLOR, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
+import { LazyImage } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { ColorProjection, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { PriceProjection } from "../../../../../../projection/price/price";
@@ -55,16 +56,12 @@ const ProductVariant: FC<ProductVariantProps> = ({
     >
       <View style={style.row}>
         <View>
-          <Image
+          <LazyImage
+            hiResSrc={cdnImageUrl({ url: media[0]?.url as string, width: IMAGE_WIDTH })}
             resizeMode="contain"
-            style={[style.media, customStyle?.image]}
+            src={cdnImageUrl({ url: media[0]?.url as string, width: IMAGE_WIDTH, dpi: 1 })}
+            style={{ view: [style.media, customStyle?.image] }}
             testID="product-variant-media"
-            source={{
-              uri: cdnImageUrl({
-                url: media[0]?.url as string,
-                width: IMAGE_WIDTH,
-              }),
-            }}
           />
         </View>
 

package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -81,27 +81,134 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
       }
     >
       <View>
-        <Image
-          resizeMode="contain"
-          source={
-            {
-              "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=208&f=auto",
-            }
-          }
+        <View
           style={
             [
               {
-                "borderColor": "#DAD8D8",
-                "borderRadius": 8,
-                "borderWidth": 2,
-                "height": 132,
-                "width": 104,
+                "position": "relative",
               },
-              undefined,
+              [
+                {
+                  "borderColor": "#DAD8D8",
+                  "borderRadius": 8,
+                  "borderWidth": 2,
+                  "height": 132,
+                  "width": 104,
+                },
+                undefined,
+              ],
             ]
           }
           testID="product-variant-media"
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID="lazy-image-skeleton"
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                [
+                  {
+                    "backgroundColor": "#F8F7F7",
+                    "flex": 1,
+                    "height": undefined,
+                    "overflow": "hidden",
+                    "width": undefined,
+                  },
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                duration={1200}
+                style={
+                  {
+                    "height": "100%",
+                    "left": 0,
+                    "transform": [
+                      {
+                        "translateX": -375,
+                      },
+                    ],
+                    "width": "100%",
+                  }
+                }
+              >
+                <View
+                  colors={
+                    [
+                      "rgba(255, 255, 255, 0)",
+                      "#DAD8D8",
+                      "#DAD8D8",
+                      "rgba(255, 255, 255, 0)",
+                    ]
+                  }
+                  end={
+                    {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={
+                    [
+                      0,
+                      0.25,
+                      0.75,
+                      1,
+                    ]
+                  }
+                  start={
+                    {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    {
+                      "height": "100%",
+                      "width": "100%",
+                    }
+                  }
+                />
+              </View>
+            </View>
+          </View>
+          <Image
+            animatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            collapsable={false}
+            onLoad={[Function]}
+            resizeMode="contain"
+            source={
+              {
+                "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=104&f=auto",
+              }
+            }
+            style={
+              {
+                "flex": 1,
+                "height": "100%",
+                "opacity": 0,
+                "position": "absolute",
+                "width": "100%",
+                "zIndex": 10,
+              }
+            }
+            testID="lazy-image-main-image"
+          />
+        </View>
       </View>
       <View
         style={
@@ -324,27 +431,134 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
       }
     >
       <View>
-        <Image
-          resizeMode="contain"
-          source={
-            {
-              "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=208&f=auto",
-            }
-          }
+        <View
           style={
             [
               {
-                "borderColor": "#DAD8D8",
-                "borderRadius": 8,
-                "borderWidth": 2,
-                "height": 132,
-                "width": 104,
+                "position": "relative",
               },
-              undefined,
+              [
+                {
+                  "borderColor": "#DAD8D8",
+                  "borderRadius": 8,
+                  "borderWidth": 2,
+                  "height": 132,
+                  "width": 104,
+                },
+                undefined,
+              ],
             ]
           }
           testID="product-variant-media"
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID="lazy-image-skeleton"
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                [
+                  {
+                    "backgroundColor": "#F8F7F7",
+                    "flex": 1,
+                    "height": undefined,
+                    "overflow": "hidden",
+                    "width": undefined,
+                  },
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                duration={1200}
+                style={
+                  {
+                    "height": "100%",
+                    "left": 0,
+                    "transform": [
+                      {
+                        "translateX": -375,
+                      },
+                    ],
+                    "width": "100%",
+                  }
+                }
+              >
+                <View
+                  colors={
+                    [
+                      "rgba(255, 255, 255, 0)",
+                      "#DAD8D8",
+                      "#DAD8D8",
+                      "rgba(255, 255, 255, 0)",
+                    ]
+                  }
+                  end={
+                    {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={
+                    [
+                      0,
+                      0.25,
+                      0.75,
+                      1,
+                    ]
+                  }
+                  start={
+                    {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    {
+                      "height": "100%",
+                      "width": "100%",
+                    }
+                  }
+                />
+              </View>
+            </View>
+          </View>
+          <Image
+            animatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            collapsable={false}
+            onLoad={[Function]}
+            resizeMode="contain"
+            source={
+              {
+                "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=104&f=auto",
+              }
+            }
+            style={
+              {
+                "flex": 1,
+                "height": "100%",
+                "opacity": 0,
+                "position": "absolute",
+                "width": "100%",
+                "zIndex": 10,
+              }
+            }
+            testID="lazy-image-main-image"
+          />
+        </View>
       </View>
       <View
         style={