Fix(core): rendering of placeholder color

README.md

@@ -43,4 +43,5 @@ const App = () => (
 bun install
 bun run cosmos
 # open localhost:5000
+# set network throttling to something really slow
 ```

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 ? (
     <AnimatePresence>

src/Media.tsx

@@ -57,14 +57,6 @@ export const Media: FC<MediaInterface> = ({
     [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<MediaInterface> = ({
   }, [onDimensions]);
 
   return (
-    <div className="media" style={useStyle} onClick={onClick}>
+    <div className="media" onClick={onClick}>
       <Image
-        motionProps={motionProps}
         alt={alt}
         height={height}
         loadState={loadState}
+        motionProps={motionProps}
+        placeholder={placeholder}
         ref={SvgRef}
         src={src}
         theme={theme}

src/types.ts

@@ -28,6 +28,7 @@ export type GetUrl = (x: SrcType) => string;
 
 export type IdealImageProps = BaseProps & {
   alt: string;
-  srcSet: SrcSet;
   motionProps?: MotionProps;
+  placeholder?: string;
+  srcSet: SrcSet;
 };