Async script load

[Bogdaan]

Current "no-async" solution is too slow for mobile clients.
It posible to load library "async way" with callback?

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
    async defer></script>

[ro-ka]

Did you try it out? What does not work?

[ro-ka]

Closing. You can mount the component in the callback.

As there may be many more components or things in a project using the Google Maps API, I won’t include loading of the API into this component.

[oyeanuj]

You can mount the component in the callback.

@ro-ka What do you think of an optional async HoC, like being prepared in react-google-maps [1][2]?

@Bogdaan How did you finally end up implementing this in an async manner?

[ro-ka]

@oyeanuj Can you explain that a bit?

[oyeanuj]

@ro-ka I was thinking out aloud but maybe along the lines of the options offered in react-google-maps. See usage here under the section 'Loading Libraries'.

Option 1
Have a prop passed in to ReactGeoSuggest called apiKey and handleScriptLoading, which if set lets ReactGeoSuggest deal with script loading (seems like the most straightforward!)

Option 2
Offer an optional component like <ReactGeoSuggestAsync /> which does the same as ReactGeoSuggest but wraps it up with a script loading HoC.

Which brings us to..

Option 3
Offer a HoC AsyncScriptLoad which accepts an apiKey prop, and sets gmapApiLoaded prop when the script is loaded.

Option 4
Do nothing :)

In full disclosure, I got it to work using react-async-script-loader but think that it would be cleaner , more consistent and easier for new users, if the library took care of it.

[ro-ka]

I’m still voting for Option 4. 😃 Not sure what I would prefer from a users POV…