fix: image loading in the server

.changeset/kind-insects-end.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-image": patch
+---
+
+server validation added to the use-image hook

packages/hooks/use-image/__tests__/use-image.test.tsx

@@ -1,4 +1,4 @@
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook, waitFor} from "@testing-library/react";
 import {mocks} from "@nextui-org/test-utils";
 
 import {useImage} from "../src";
@@ -14,31 +14,31 @@ describe("use-image hook", () => {
   });
 
   it("can handle missing src", () => {
-    const rendered = renderHook(() => useImage({}));
+    const {result} = renderHook(() => useImage({}));
 
-    expect(rendered.result.current).toEqual("pending");
+    expect(result.current).toEqual("pending");
   });
 
   it("can handle loading image", async () => {
-    const rendered = renderHook(() => useImage({src: "/test.png"}));
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
 
-    expect(rendered.result.current).toEqual("loading");
+    expect(result.current).toEqual("loading");
     mockImage.simulate("loaded");
-    await rendered.waitForValueToChange(() => rendered.result.current === "loaded");
+    await waitFor(() => expect(result.current).toBe("loaded"));
   });
 
   it("can handle error image", async () => {
     mockImage.simulate("error");
-    const rendered = renderHook(() => useImage({src: "/test.png"}));
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
 
-    expect(rendered.result.current).toEqual("loading");
-    await rendered.waitForValueToChange(() => rendered.result.current === "failed");
+    expect(result.current).toEqual("loading");
+    await waitFor(() => expect(result.current).toBe("failed"));
   });
 
   it("can handle cached image", async () => {
     mockImage.simulate("loaded");
-    const rendered = renderHook(() => useImage({src: "/test.png"}));
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
 
-    expect(rendered.result.current).toEqual("loaded");
+    expect(result.current).toEqual("loaded");
   });
 });

packages/hooks/use-image/package.json

@@ -34,8 +34,7 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@testing-library/react-hooks": "^8.0.1"
+    "@nextui-org/use-safe-layout-effect": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18"

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

@@ -122,7 +122,7 @@ function setImageAndGetInitialStatus(
   if (!src) return "pending";
   if (ignoreFallback) return "loaded";
 
-  const img = document.createElement("img");
+  const img = typeof window !== "undefined" ? new Image() : document.createElement("img");
 
   img.src = src;
   if (crossOrigin) img.crossOrigin = crossOrigin;