Skip to content

fix: image load on next.js #3998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jrgarciadev merged 1 commit into from
Nov 5, 2024
Merged

fix: image load on next.js #3998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gentle-needles-rescue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/use-image": patch
---

use-image hook logic restore to the previous one to avoid nextjs hydration issues
7 changes: 0 additions & 7 deletions packages/hooks/use-image/__tests__/use-image.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,4 @@ describe("use-image hook", () => {
expect(result.current).toEqual("loading");
await waitFor(() => expect(result.current).toBe("failed"));
});

it("can handle cached image", async () => {
mockImage.simulate("loaded");
const {result} = renderHook(() => useImage({src: "/test.png"}));

expect(result.current).toEqual("loaded");
});
});
241 changes: 190 additions & 51 deletions packages/hooks/use-image/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,160 @@
// /**
// * Part of this code is taken from @chakra-ui/react package ❤️
// */
// import type {ImgHTMLAttributes, MutableRefObject, SyntheticEvent} from "react";

// import {useEffect, useRef, useState} from "react";
// import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";

// type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;

// export interface UseImageProps {
// /**
// * The image `src` attribute
// */
// src?: string;
// /**
// * The image `srcset` attribute
// */
// srcSet?: string;
// /**
// * The image `sizes` attribute
// */
// sizes?: string;
// /**
// * A callback for when the image `src` has been loaded
// */
// onLoad?: NativeImageProps["onLoad"];
// /**
// * A callback for when there was an error loading the image `src`
// */
// onError?: NativeImageProps["onError"];
// /**
// * If `true`, opt out of the `fallbackSrc` logic and use as `img`
// */
// ignoreFallback?: boolean;
// /**
// * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
// * This tells the browser to request cross-origin access when trying to download the image data.
// */
// crossOrigin?: NativeImageProps["crossOrigin"];
// loading?: NativeImageProps["loading"];
// }

// type Status = "loading" | "failed" | "pending" | "loaded";

// export type FallbackStrategy = "onError" | "beforeLoadOrError";

// type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;

// /**
// * React hook that loads an image in the browser,
// * and lets us know the `status` so we can show image
// * fallback if it is still `pending`
// *
// * @returns the status of the image loading progress
// *
// * @example
// *
// * ```jsx
// * function App(){
// * const status = useImage({ src: "image.png" })
// * return status === "loaded" ? <img src="image.png" /> : <Placeholder />
// * }
// * ```
// */
// export function useImage(props: UseImageProps = {}) {
// const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;

// const imageRef = useRef<HTMLImageElement | null>();
// const firstMount = useRef<boolean>(true);
// const [status, setStatus] = useState<Status>(() => setImageAndGetInitialStatus(props, imageRef));

// useSafeLayoutEffect(() => {
// if (firstMount.current) {
// firstMount.current = false;

// return;
// }

// setStatus(setImageAndGetInitialStatus(props, imageRef));

// return () => {
// flush();
// };
// }, [src, crossOrigin, srcSet, sizes, loading]);

// useEffect(() => {
// if (!imageRef.current) return;
// imageRef.current.onload = (event) => {
// flush();
// setStatus("loaded");
// onLoad?.(event as unknown as ImageEvent);
// };
// imageRef.current.onerror = (error) => {
// flush();
// setStatus("failed");
// onError?.(error as any);
// };
// }, [imageRef.current]);

// const flush = () => {
// if (imageRef.current) {
// imageRef.current.onload = null;
// imageRef.current.onerror = null;
// imageRef.current = null;
// }
// };

// /**
// * If user opts out of the fallback/placeholder
// * logic, let's just return 'loaded'
// */
// return ignoreFallback ? "loaded" : status;
// }

// function setImageAndGetInitialStatus(
// props: UseImageProps,
// imageRef: MutableRefObject<HTMLImageElement | null | undefined>,
// ): Status {
// const {loading, src, srcSet, crossOrigin, sizes, ignoreFallback} = props;

// if (!src) return "pending";
// if (ignoreFallback) return "loaded";

// try {
// const img = new Image();

// img.src = src;
// if (crossOrigin) img.crossOrigin = crossOrigin;
// if (srcSet) img.srcset = srcSet;
// if (sizes) img.sizes = sizes;
// if (loading) img.loading = loading;

// imageRef.current = img;
// if (img.complete && img.naturalWidth) {
// return "loaded";
// }

// return "loading";
// } catch (error) {
// return "loading";
// }
// }

// export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
// (status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
// (status === "failed" && fallbackStrategy === "onError");

// export type UseImageReturn = ReturnType<typeof useImage>;

/**
* Part of this code is taken from @chakra-ui/react package ❤️
*/
import type {ImgHTMLAttributes, MutableRefObject, SyntheticEvent} from "react";

import {useEffect, useRef, useState} from "react";
import type {ImgHTMLAttributes, SyntheticEvent} from "react";

import {useCallback, useEffect, useRef, useState} from "react";
import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";

type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
Expand Down Expand Up @@ -46,7 +197,6 @@ type Status = "loading" | "failed" | "pending" | "loaded";
export type FallbackStrategy = "onError" | "beforeLoadOrError";

type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;

/**
* React hook that loads an image in the browser,
* and lets us know the `status` so we can show image
Expand All @@ -63,40 +213,44 @@ type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
* }
* ```
*/

export function useImage(props: UseImageProps = {}) {
const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;

const [status, setStatus] = useState<Status>("pending");

useEffect(() => {
setStatus(src ? "loading" : "pending");
}, [src]);

const imageRef = useRef<HTMLImageElement | null>();
const firstMount = useRef<boolean>(true);
const [status, setStatus] = useState<Status>(() => setImageAndGetInitialStatus(props, imageRef));

useSafeLayoutEffect(() => {
if (firstMount.current) {
firstMount.current = false;
const load = useCallback(() => {
if (!src) return;

return;
}
flush();

setStatus(setImageAndGetInitialStatus(props, imageRef));
const img = new Image();

return () => {
flush();
};
}, [src, crossOrigin, srcSet, sizes, loading]);
img.src = src;
if (crossOrigin) img.crossOrigin = crossOrigin;
if (srcSet) img.srcset = srcSet;
if (sizes) img.sizes = sizes;
if (loading) img.loading = loading;

useEffect(() => {
if (!imageRef.current) return;
imageRef.current.onload = (event) => {
img.onload = (event) => {
flush();
setStatus("loaded");
onLoad?.(event as unknown as ImageEvent);
};
imageRef.current.onerror = (error) => {
img.onerror = (error) => {
flush();
setStatus("failed");
onError?.(error as any);
};
}, [imageRef.current]);

imageRef.current = img;
}, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading]);

const flush = () => {
if (imageRef.current) {
Expand All @@ -106,40 +260,25 @@ export function useImage(props: UseImageProps = {}) {
}
};

useSafeLayoutEffect(() => {
/**
* If user opts out of the fallback/placeholder
* logic, let's bail out.
*/
if (ignoreFallback) return undefined;

if (status === "loading") {
load();
}

return () => {
flush();
};
}, [status, load, ignoreFallback]);

/**
* If user opts out of the fallback/placeholder
* logic, let's just return 'loaded'
*/
return ignoreFallback ? "loaded" : status;
}

function setImageAndGetInitialStatus(
props: UseImageProps,
imageRef: MutableRefObject<HTMLImageElement | null | undefined>,
): Status {
const {loading, src, srcSet, crossOrigin, sizes, ignoreFallback} = props;

if (!src) return "pending";
if (ignoreFallback) return "loaded";

const img = typeof window !== "undefined" ? new Image() : document.createElement("img");

img.src = src;
if (crossOrigin) img.crossOrigin = crossOrigin;
if (srcSet) img.srcset = srcSet;
if (sizes) img.sizes = sizes;
if (loading) img.loading = loading;

imageRef.current = img;
if (img.complete && img.naturalWidth) {
return "loaded";
}

return "loading";
}

export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
(status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
(status === "failed" && fallbackStrategy === "onError");

export type UseImageReturn = ReturnType<typeof useImage>;