chore(AsynchronousLoading): add async loaded api example

client/scripts/ComponentPlayground.js

@@ -17,11 +17,40 @@ module.exports = React.createClass({
     componentRaw: PropTypes.shape({__raw: PropTypes.string}).isRequired,
   },
 
+  getInitialState () {
+    return {
+      googleMapsApi: google.maps
+    };
+  },
+
+  componentDidMount () {
+    this._setup_async_loaded();
+  },
+
+  componentWillReceiveProps (nextProps) {
+    this.setState({
+      googleMapsApi: nextProps.componentAsync ? null : google.maps
+    });
+  },
+
+  componentDidUpdate () {
+    if (this.props.componentAsync && !this.state.googleMapsApi) {
+      this._setup_async_loaded();
+    }
+  },
+
+  _setup_async_loaded () {
+    setTimeout(() => {
+      // Emulated google.maps script is loaded async.
+      this.setState({googleMapsApi: google.maps});
+    }, 3000);
+  },
+
   _render (props, state) {
     var Component = props.componentClass;
 
     return <div className={props.className}>
-      <Component className="col-xs-6" {...props.componentProps} />
+      <Component className="col-xs-6" {...props.componentProps} {...state} />
       <div className="col-xs-6">
         <pre><PrismCode className="language-javascript">
           {props.componentRaw.__raw}

client/scripts/components/GeojsonToComponents.js

@@ -40,7 +40,6 @@ module.exports = React.createClass({
 
   getInitialState () {
     return  {
-      googleMapsApi: google.maps,
       geoJson: this.props.initialGeoJson,
       geoStateBy: {
         0: {

client/scripts/components/basics/AsynchronousLoading.js

@@ -0,0 +1,18 @@
+"use strict";
+var React = require("react/addons"),
+    {update} = React.addons,
+
+    {GoogleMapsMixin, Map} = require("../../../../src");
+
+// https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
+module.exports = React.createClass({
+  displayName: "SimpleMap",
+
+  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
+
+  _render (props, state) {
+    return <div style={{height: "100%"}} {...props}>
+      <Map style={{height: "100%"}} zoom={8} center={{lat: -34.397, lng: 150.644}} />
+    </div>;
+  }
+});

client/scripts/index.js

@@ -37,19 +37,23 @@ DROPDOWN_ACTIONS = [
     path: "basics/simple-map",
     component: {
       componentClass: require("./components/basics/SimpleMap"),
-      componentProps: {
-        googleMapsApi: google.maps,
-      },
       componentRaw: {
         __raw: require("!raw-loader!./components/basics/SimpleMap"),
       },
     },
   },
   false,
   {
-    key: "geojson2",
-    displayName: "Geojson 2 to Components",
-    path: "geojson2-to-components",
+    key: "basics__asynchronous-loading",
+    displayName: "Asynchronous Loading",
+    path: "basics/asynchronous-loading",
+    component: {
+      componentClass: require("./components/basics/AsynchronousLoading"),
+      componentAsync: true,
+      componentRaw: {
+        __raw: require("!raw-loader!./components/basics/AsynchronousLoading"),
+      },
+    },
   },
 ];