@artsy/palette-mobile 20.0.0 → 20.1.0

package/dist/elements/Image/Image.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
-import { memo, useRef } from "react";
-import { View, Animated } from "react-native";
+import { memo, useState } from "react";
+import { View } from "react-native";
 import { Blurhash } from "react-native-blurhash";
 import { getImageURL } from "./helpers/getImageURL";
 import { useColor } from "../../utils/hooks";
@@ -9,20 +9,16 @@ import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Flex } from "../Flex";
 import { Skeleton, SkeletonBox } from "../Skeleton";
 export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
+    const [isLoading, setIsLoading] = useState(false);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = useColor();
-    const opacity = useRef(new Animated.Value(0)).current;
     const onLoadEnd = () => {
-        Animated.timing(opacity, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-        }).start();
+        setIsLoading(false);
     };
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(FastImage, { style: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [isLoading && (_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) })), _jsx(FastImage, { style: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -55,7 +51,7 @@ const useImageDimensions = (props) => {
 };
 export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
     }
     return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.0.0",
+  "version": "20.1.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",