feat: use Image in Noise component

hmerritt · Nov 6, 2023 · 64ac6f2 · 64ac6f2
1 parent 3c53c02
commit 64ac6f2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/lib/styles/global/reset.scss b/src/lib/styles/global/reset.scss
@@ -476,7 +476,7 @@ strong {
 }
 
 img {
-	transition: opacity 100ms ease-in-out;
+	transition: opacity 80ms ease-in-out;
 }
 
 svg {

diff --git a/src/view/components/experimental/Noise.tsx b/src/view/components/experimental/Noise.tsx
@@ -1,6 +1,8 @@
 import { css, cx } from "@linaria/core";
 import { useEffect, useRef } from "react";
 
+import { Image, ImageProps } from "../Image";
+
 const canvasNoise = (
 	ctx: CanvasRenderingContext2D,
 	patternSize = 64,
@@ -37,7 +39,7 @@ export type NoiseProps = {
 export type NoiseImgProps = NoiseProps &
 	JSX.IntrinsicElements["div"] & {
 		src?: string;
-		imgProps?: JSX.IntrinsicElements["img"];
+		imgProps?: ImageProps;
 	};
 
 /**
@@ -108,7 +110,13 @@ export const NoiseImg = ({
 }: NoiseImgProps) => {
 	return (
 		<div className={cx(noiseImg, className)} {...divProps}>
-			<img src={src} width="100%" height="100%" draggable={false} {...imgProps} />
+			<Image
+				src={src}
+				width="100%"
+				height="100%"
+				hideWhileLoading={true}
+				{...imgProps}
+			/>
 			<Noise
 				framerate={framerate}
 				size={size}
-Original file line number
+Diff line change
@@ Expand Up / @@ -476,7 +476,7 @@ strong { @@
     }
     img {
-    	transition: opacity 100ms ease-in-out;
+    	transition: opacity 80ms ease-in-out;
     }
     svg {
@@ Expand Down @@