[Bug]: loadingStatus state for react-google-charts is set as loading permanantly

[akshit-dev101]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

import { Chart } from "react-google-charts";

function SankeyGraph(props) {
  const data = [
    ["From", "To", "Weight"],
    ["A", "X", 5],
    ["A", "Y", 7],
    ["A", "Z", 6],
    ["B", "X", 2],
    ["B", "Y", 9],
    ["B", "Z", 4],
  ];

  const options = {};
  return (
    <Chart
      chartType="Sankey"
      width="40%"
      height="200px"
      data={data}
      options={options}
    />
  );
}

export default SankeyGraph;

{
  "loadingStatus": "loading",
  "google": null
}

This is the state of the component even after all the rendering is done, it stays in loading, I tried the same code on code sandbox it worked fine.

Reproduction

Want able to reproduce this issue outside my project environment

react-google-charts version

v4.0.1

Possible solution

No response

[davoam]

@akshit-dev101 in our case it happened because we use Google Maps as well.

When charts are loaded and then a user goes to GoogleMap screen, the problem you mentioned appears. It happens because google map react library deletes window.google object on component unmount.

In the same time in the charts library, it is expected that if there is a script on the page, there should be window.google object. Which never happens, and the library is stuck on the loading state.

[akshit-dev101]

@davoam any luck with the solution?

[davoam]

We just work around the problem. This is code inside our component which shows charts. It removes script from the dom and forces the library to load chart again

useLayoutEffect(() => {
    if (!window.google) {
      const script = document.querySelector('script[src="https://www.gstatic.com/charts/loader.js"]');
      const scriptLoaded = script?.getAttribute('data-loaded');
      if (script && scriptLoaded) {
        script.remove();
      }
    }
  }, []);

I think you need to investigate your case. Probably, there is another reason. You can begin with checking value window.google in browser console

[akshit-dev101]

Currently, I have window.google as shown below, I tried using the code you provide, didn't work, but if I hard refresh the whole page the chart is visible @davoam, also I have the window.object , its not deleted as you said in the first comment.

    "charts": {
        "loader": {
            "VersionSpecific": {}
        }
    },
    "loader": {
        "LoadFailure": false
    },
    "visualization": {
        "ModulePath": {},
        "Version": "51",
        "Locale": "",
        "isDebug": false,
        "isPseudo": false,
        "mapsApiKey": {},
        "data": {},
        "errors": {
            "rV": "google-visualization-errors",
            "s6": "google-visualization-errors-",
            "v6": "google-visualization-errors:",
            "mV": "google-visualization-errors-all-",
            "r6": "google-visualization-errors: container is null",
            "tia": "background-color: #c00000; color: white; padding: 2px;",
            "Qja": "background-color: #fff4c2; color: black; white-space: nowrap; padding: 2px; border: 1px solid black;",
            "Sja": "font: normal 0.8em arial,sans-serif; margin-bottom: 5px;",
            "qja": "font-size: 1.1em; color: #00c; font-weight: bold; cursor: pointer; padding-left: 10px; color: black;text-align: right; vertical-align: top;"
        },
        "events": {},
        "datautils": {}
    }
}`

[davoam]

Sorry, I have no ideas what else may cause the problem. Most likely, in your case, there is another reason. Try setting breakpoints in devtools inside the library code and check what happens.