diff --git a/README.md b/README.md index 1bffb0f..b17e0eb 100644 --- a/README.md +++ b/README.md @@ -43,4 +43,5 @@ const App = () => ( bun install bun run cosmos # open localhost:5000 +# set network throttling to something really slow ``` diff --git a/src/Image.tsx b/src/Image.tsx index f4be9a7..d1578db 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -17,6 +17,7 @@ export const Image = forwardRef(function Image( alt, height, loadState, + placeholder, theme, width, // @@ -38,19 +39,25 @@ export const Image = forwardRef(function Image( ); const imageProps = useMemo(() => { const baseProps = { width, height, alt }; - const style = { ...theme.img, width, height }; + const imgStyle = { ...theme.img, width, height }; + const placeholderStyle = { + ...theme.placeholder, + width, + height, + backgroundColor: placeholder, + }; return src && loadState === loadStates.Loaded ? { ...baseProps, src, - style, + style: imgStyle, } : { ...baseProps, ref: svgRef, - style, + style: placeholderStyle, }; - }, [loadState, src, alt, width, height, svgRef, theme]); + }, [loadState, src, alt, width, height, svgRef, theme, placeholder]); return loadState === loadStates.Loaded ? ( diff --git a/src/Media.tsx b/src/Media.tsx index 7fb5646..347f81b 100644 --- a/src/Media.tsx +++ b/src/Media.tsx @@ -57,14 +57,6 @@ export const Media: FC = ({ [iconSize, iconColor, theme] ); - const useStyle = useMemo( - () => ({ - ...theme.placeholder, - backgroundColor: placeholder, - }), - [theme, placeholder] - ); - const SvgRef: SvgRef = useRef(null); useEffect(() => { @@ -83,12 +75,13 @@ export const Media: FC = ({ }, [onDimensions]); return ( -
+
{alt} string; export type IdealImageProps = BaseProps & { alt: string; - srcSet: SrcSet; motionProps?: MotionProps; + placeholder?: string; + srcSet: SrcSet; };