feat(annual-report): dynamically load the world map when it is scrolled to

src/components/world-map/world-map.jsx

-const Plotly = require('plotly.js/lib/core');
+import React from 'react';
+import PropTypes from 'prop-types';
+import Plotly from 'plotly.js/lib/core';
+import choropleth from 'plotly.js/lib/choropleth';
+import createPlotlyComponent from 'react-plotly.js/factory';
 
 // Load in the trace type for choropleth
-Plotly.register([
-    require('plotly.js/lib/choropleth')
-]);
+Plotly.register([choropleth]);
 
 // create plotly bundle that only has choropleth plots
-import createPlotlyComponent from 'react-plotly.js/factory';
 const Plot = createPlotlyComponent(Plotly);
 
-const React = require('react');
-const PropTypes = require('prop-types');
-
 const WorldMap = props => (
     <Plot
         useResizeHandler
@@ -86,4 +84,4 @@ WorldMap.propTypes = {
     countryNames: PropTypes.arrayOf(PropTypes.string)
 };
 
-module.exports = WorldMap;
+export default WorldMap;

src/views/annual-report/annual-report.jsx

@@ -15,7 +15,6 @@ const Grid = require('../../components/grid/grid.jsx');
 const Button = require('../../components/forms/button.jsx');
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Comment = require('../../components/comment/comment.jsx');
-const WorldMap = require('../../components/world-map/world-map.jsx');
 const CountryUsage = require('./country-usage.json');
 const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
@@ -23,6 +22,11 @@ const BLMProjects = require('./blm-projects.json');
 const VideoPreview = require('../../components/video-preview/video-preview.jsx');
 const Supporters = require('./supporters.json');
 
+const WorldMap = React.lazy(() => import(
+    /* webpackChunkName: "world-map" */
+    '../../components/world-map/world-map.jsx'
+));
+
 require('./annual-report.scss');
 
 // Some constants used for the page subnav and section refs
@@ -831,6 +835,8 @@ class AnnualReport extends React.Component {
                                     </div>
                                 </div>
                                 <div className="map-wrapper">
+                                    {this.state.currentlyVisible === SECTIONS.reach &&
+                                        <React.Suspense fallback={null}>
                                             <MediaQuery minWidth={frameless.desktop}>
                                                 <WorldMap
                                                     className="map"
@@ -869,6 +875,8 @@ class AnnualReport extends React.Component {
                                                     countryNames={countryNames}
                                                 />
                                             </MediaQuery>
+                                        </React.Suspense>
+                                    }
                                 </div>
                             </div>
                         </div>