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

[akshit-dev101]

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

[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.