From 64ac6f2be037c998c2c67d8ba9431dad8d2bd131 Mon Sep 17 00:00:00 2001
From: hmerritt <harry@mrrtt.me>
Date: Mon, 6 Nov 2023 23:01:17 +0000
Subject: [PATCH] feat: use Image in Noise component

---
 src/lib/styles/global/reset.scss           |  2 +-
 src/view/components/experimental/Noise.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/styles/global/reset.scss b/src/lib/styles/global/reset.scss
index ae32de1..6b79326 100644
--- 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
index d1a9d1e..791963c 100644
--- 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}