fix: set loading/success when erroring in useLoadScript

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.

packages/react-google-charts/test/Chart.spec.tsx

@@ -15,6 +15,34 @@ describe("<Chart />", () => {
     expect(getByText("Loading Chart")).toBeVisible();
   });
 
+  it("should render errorElement", async () => {
+    const { findByText } = render(
+      <Chart
+        chartType="AreaChart"
+        chartLoaderScriptUrl="http://0.0.0.0/invalid-errorElement.js"
+        errorElement={<div>Don't Panic</div>} />,
+    );
+
+    expect(await findByText("Don't Panic")).toBeVisible();
+
+  });
+
+  it("should render loader then errorElement", async () => {
+    const { getByText, queryByText, findByText } = render(
+      <Chart
+        chartType="AreaChart"
+        chartLoaderScriptUrl="http://0.0.0.0/invalid-loader-errorElement.js"
+        loader={<div>Loading Chart</div>}
+        errorElement={<div>Don't Panic</div>} />,
+    );
+
+    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(
       <Chart