Get rid of transitions on placeholder

datocms · Nov 11, 2022 · c7624b2 · c7624b2
1 parent 7e058b5
commit c7624b2
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/src/Image/index.tsx b/src/Image/index.tsx
@@ -265,22 +265,21 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
     const transition =
       fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : undefined;
 
-    const placeholder = usePlaceholder ? (
-      <img
-        role="presentation"
-        aria-hidden="true"
-        alt=""
-        src={data.base64 ?? undefined}
-        style={{
-          backgroundColor: data.bgColor ?? undefined,
-          opacity: showImage ? 0 : 1,
-          transition,
-          objectFit,
-          objectPosition,
-          ...absolutePositioning,
-        }}
-      />
-    ) : null;
+    const placeholder =
+      usePlaceholder && (data.bgColor || data.base64) ? (
+        <img
+          role="presentation"
+          aria-hidden="true"
+          alt=""
+          src={data.base64 ?? undefined}
+          style={{
+            backgroundColor: data.bgColor ?? undefined,
+            objectFit,
+            objectPosition,
+            ...absolutePositioning,
+          }}
+        />
+      ) : null;
 
     const { width, aspectRatio } = data;
     const height = data.height || width / aspectRatio;