@artsy/palette-mobile 21.0.1 → 21.1.0

package/dist/constants.d.ts

@@ -13,3 +13,4 @@ export declare const DEFAULT_ICON_SIZE: number;
  */
 export declare let DEFAULT_ACTIVE_OPACITY: number;
 export declare const setGlobalActiveOpacity: (opacity: number) => void;
+export declare const DEFAULT_ANIMATION_DURATION = 200;

package/dist/constants.js

@@ -12,3 +12,4 @@ export let DEFAULT_ACTIVE_OPACITY = 0.8;
 export const setGlobalActiveOpacity = (opacity) => {
     DEFAULT_ACTIVE_OPACITY = opacity;
 };
+export const DEFAULT_ANIMATION_DURATION = 200;

package/dist/elements/Image/Image.js

@@ -1,24 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
-import { View } from "react-native";
 import { Blurhash } from "react-native-blurhash";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
 import { getImageURL } from "./helpers/getImageURL";
+import { DEFAULT_ANIMATION_DURATION } from "../../constants";
 import { useColor } from "../../utils/hooks";
 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 [isLoading, setIsLoading] = useState(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const opacity = useSharedValue(1);
     const color = useColor();
     const onLoadEnd = () => {
-        setIsLoading(false);
+        opacity.value = withSpring(0, { duration: DEFAULT_ANIMATION_DURATION }, () => {
+            runOnJS(setIsLoading)(false);
+        });
     };
+    const skeletonStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+        };
+    });
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    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: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -27,7 +36,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
                 ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
                     priority: FastImage.priority.normal,
                     uri: getImageURL({ src, dimensions, geminiResizeMode, performResize }),
-                } })] }));
+                } }), isLoading && (_jsx(Animated.View, { style: [dimensions, { position: "absolute" }, skeletonStyle], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "21.0.1",
+  "version": "21.1.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"