archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(use-image): set status after hydrated (#4486)

Browse Source 
* fix(use-image): set status after hydrated

* fix(use-image): use useSafeLayoutEffect instead
This commit is contained in:
աӄա 2025-01-03 22:23:42 +08:00 committed by GitHub
parent 0eb96f6e5e
commit 5d0fc9f786
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fair-pigs-tap.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/use-image": patch
---
set status after hydrated

11
packages/hooks/use-image/src/index.ts
View File

@ -6,6 +6,7 @@ import type {ImgHTMLAttributes, SyntheticEvent} from "react";
import {useRef, useState, useEffect, MutableRefObject} from "react";
import {useIsHydrated} from "@nextui-org/react-utils";
import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
@ -71,9 +72,7 @@ export function useImage(props: UseImageProps = {}) {
const imageRef = useRef<HTMLImageElement | null>(isHydrated ? new Image() : null);
const [status, setStatus] = useState<Status>(() =>
isHydrated ? setImageAndGetInitialStatus(props, imageRef) : "pending",
);
const [status, setStatus] = useState<Status>("pending");
useEffect(() => {
if (!imageRef.current) return;
@ -97,6 +96,12 @@ export function useImage(props: UseImageProps = {}) {
}
};
useSafeLayoutEffect(() => {
if (isHydrated) {
setStatus(setImageAndGetInitialStatus(props, imageRef));
}
}, [isHydrated]);
/**
* If user opts out of the fallback/placeholder
* logic, let's just return 'loaded'