Migrate from next image to img

front/packages/primitives/src/image/blurhash.web.tsx

@@ -276,6 +276,18 @@ const BlurhashDiv = forwardRef<
 	);
 });
 
+export const useRenderType = () => {
+	const [renderType, setRenderType] = useState<"ssr" | "hydratation" | "client">(
+		typeof window === "undefined" ? "ssr" : "hydratation",
+	);
+
+	useLayoutEffect(() => {
+		setRenderType("client");
+	}, []);
+
+	return renderType;
+};
+
 export const BlurhashContainer = ({
 	blurhash,
 	children,
@@ -285,15 +297,7 @@ export const BlurhashContainer = ({
 	children?: ReactElement | ReactElement[];
 }) => {
 	const { css } = useYoshiki();
-	const ref = useRef<HTMLCanvasElement & HTMLDivElement>(null);
+	const renderType = useRenderType();
-	const [renderType, setRenderType] = useState<"ssr" | "hydratation" | "client">(
-		typeof window === "undefined" ? "ssr" : "hydratation",
-	);
-
-	useLayoutEffect(() => {
-		// If the html is empty, it was not SSRed.
-		if (ref.current?.innerHTML === "") setRenderType("client");
-	}, []);
 
 	return (
 		<div
@@ -307,10 +311,10 @@ export const BlurhashContainer = ({
 				nativeStyleToCss(props),
 			)}
 		>
-			{renderType === "ssr" && <BlurhashDiv ref={ref} blurhash={blurhash} />}
+			{renderType === "ssr" && <BlurhashDiv blurhash={blurhash} />}
-			{renderType === "client" && <BlurhashCanvas ref={ref} blurhash={blurhash} />}
+			{renderType === "client" && <BlurhashCanvas blurhash={blurhash} />}
 			{renderType === "hydratation" && (
-				<div ref={ref} dangerouslySetInnerHTML={{ __html: "" }} suppressHydrationWarning />
+				<div dangerouslySetInnerHTML={{ __html: "" }} suppressHydrationWarning />
 			)}
 			{children}
 		</div>

front/packages/primitives/src/image/image.web.tsx

@@ -25,7 +25,7 @@ import { useYoshiki } from "yoshiki/native";
 import { imageBorderRadius } from "../constants";
 import { Skeleton } from "../skeleton";
 import type { ImageLayout, Props } from "./base-image";
-import { BlurhashContainer } from "./blurhash.web";
+import { BlurhashContainer, useRenderType } from "./blurhash.web";
 
 export const Image = ({
 	src,
@@ -54,18 +54,25 @@ export const Image = ({
 
 	return (
 		<BlurhashContainer blurhash={src.blurhash} {...css([layout, border], props)}>
-			<NextImage
+			<img
-				src={src[quality ?? "high"]}
-				priority={quality === "high"}
-				alt={alt!}
-				fill={true}
 				style={{
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					color: "transparent",
 					objectFit: "cover",
 					opacity: state === "loading" ? 0 : 1,
 					transition: "opacity .2s ease-out",
 				}}
-				// Don't use next's server to reprocess images, they are already optimized by kyoo.
+				// It's intended to keep `loading` before `src` because React updates
-				unoptimized={true}
+				// props in order which causes Safari/Firefox to not lazy load properly.
+				// See https://github.com/facebook/react/issues/25883
+				loading={quality === "high" ? "eager" : "lazy"}
+				decoding="async"
+				fetchpriority={quality === "high" ? "high" : undefined}
+				src={src[quality ?? "high"]}
+				alt={alt!}
 				onLoad={() => setState("finished")}
 				onError={() => setState("errored")}
 				suppressHydrationWarning