diff --git a/packages/react-google-charts/src/hooks/useLoadScript.ts b/packages/react-google-charts/src/hooks/useLoadScript.ts
index fce20a31..39520934 100644
--- a/packages/react-google-charts/src/hooks/useLoadScript.ts
+++ b/packages/react-google-charts/src/hooks/useLoadScript.ts
@@ -12,14 +12,20 @@ export function useLoadScript(src: string) {
const [isSuccess, setIsSuccess] = useState(false);
const onLoad = () => {
setIsLoading(false);
+ setError(null);
setIsSuccess(true);
};
+ const onError = (error: Error | null) => {
+ setError(error);
+ setIsLoading(false);
+ setIsSuccess(false);
+ };
useEffect(() => {
if (!document) {
const error = new Error(
`[ScriptLoadingError] document not defined when attempting to load ${src}`,
);
- setError(error);
+ onError(error);
return;
}
@@ -55,7 +61,7 @@ export function useLoadScript(src: string) {
const error = new Error(
`[ScriptLoadingError] Failed to load script: ${src}`,
);
- setError(error);
+ onError(error);
});
// Add to DOM if not yet added.
diff --git a/packages/react-google-charts/test/Chart.spec.tsx b/packages/react-google-charts/test/Chart.spec.tsx
index 1eb42578..3fcf003e 100644
--- a/packages/react-google-charts/test/Chart.spec.tsx
+++ b/packages/react-google-charts/test/Chart.spec.tsx
@@ -15,6 +15,34 @@ describe("", () => {
expect(getByText("Loading Chart")).toBeVisible();
});
+ it("should render errorElement", async () => {
+ const { findByText } = render(
+ Don't Panic} />,
+ );
+
+ expect(await findByText("Don't Panic")).toBeVisible();
+
+ });
+
+ it("should render loader then errorElement", async () => {
+ const { getByText, queryByText, findByText } = render(
+ Loading Chart}
+ errorElement={Don't Panic
} />,
+ );
+
+ expect(getByText("Loading Chart")).toBeVisible();
+ expect(queryByText("Don't Panic")).toBeNull();
+
+ expect(await findByText("Don't Panic")).toBeVisible();
+ expect(queryByText("Loading Chart")).toBeNull();
+ });
+
it("should draw chart", async () => {
const { getByTestId } = render(