@artsy/palette-mobile 17.22.0 → 17.24.0

package/dist/elements/Avatar/Avatar.d.ts

@@ -1,11 +1,12 @@
 import { ImgHTMLAttributes } from "react";
 export type AvatarSize = "xxs" | "xs" | "sm" | "md";
 export interface AvatarProps extends ImgHTMLAttributes<any> {
-    src?: string;
+    blurhash?: string | null;
     /** If an image is missing, show initials instead */
     initials?: string;
     /** The size of the Avatar */
     size?: AvatarSize;
+    src?: string;
 }
 /** A circular Avatar component containing an image or initials */
-export declare const Avatar: ({ src, initials, size }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ src, initials, size, blurhash }: AvatarProps) => JSX.Element;

package/dist/elements/Avatar/Avatar.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Image } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, withDelay, } from "react-native-reanimated";
+import { MotiView } from "moti";
+import { FadeIn } from "react-native-reanimated";
 import { useColor } from "../../utils/hooks";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
+import { Image } from "../Image/Image";
 import { Text } from "../Text";
 const DEFAULT_SIZE = "md";
 const VARIANTS = {
@@ -26,24 +26,11 @@ const VARIANTS = {
     },
 };
 /** A circular Avatar component containing an image or initials */
-export const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
+export const Avatar = ({ src, initials, size = DEFAULT_SIZE, blurhash }) => {
     const color = useColor();
-    const [loading, setLoading] = useState(true);
-    const opacity = useSharedValue(0);
-    useEffect(() => {
-        opacity.set(() => withDelay(100, withTiming(1, {
-            duration: 200,
-            easing: Easing.sin,
-        })));
-    }, [loading]);
-    const style = useAnimatedStyle(() => {
-        return {
-            opacity: loading ? 0 : opacity.get(),
-        };
-    }, [loading]);
     const { diameter, textSize } = VARIANTS[size];
     if (src) {
-        return (_jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("mono0"), borderWidth: 1, children: _jsx(Animated.View, { style: style, children: _jsx(Image, { onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), resizeMode: "cover", source: { uri: src }, accessibilityLabel: "AvatarImage", style: {
+        return (_jsx(MotiView, { entering: FadeIn, children: _jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("mono0"), borderWidth: 1, children: _jsx(Image, { blurhash: blurhash, resizeMode: "cover", src: src, height: diameter, width: diameter, accessibilityLabel: "AvatarImage", style: {
                         width: diameter,
                         height: diameter,
                     } }) }) }));

package/dist/elements/Avatar/Avatar.stories.d.ts

@@ -2,7 +2,7 @@
 import { AvatarProps } from "./Avatar";
 declare const _default: {
     title: string;
-    component: ({ src, initials, size }: AvatarProps) => JSX.Element;
+    component: ({ src, initials, size, blurhash }: AvatarProps) => JSX.Element;
 };
 export default _default;
 export declare function Variants(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.22.0",
+  "version": "17.24.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",