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

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

* fix(use-image): use useSafeLayoutEffect instead

Author: wingkwong

.changeset/fair-pigs-tap.md

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

packages/hooks/use-image/src/index.ts

@@ -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'