From 81ff3d6216d6a6dcffb103d84d323509c1ee722f Mon Sep 17 00:00:00 2001
From: rschamp <ray@scratch.mit.edu>
Date: Thu, 5 Aug 2021 11:09:04 -0400
Subject: [PATCH] Revert "feat(annual-report): dynamically load the world map
 when it is scrolled to"

This reverts commit bc43ad7e29ffa67177d0663bd7c4e15262f38b08.
---
 src/components/world-map/world-map.jsx    | 16 +++--
 src/views/annual-report/annual-report.jsx | 86 ++++++++++-------------
 2 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/src/components/world-map/world-map.jsx b/src/components/world-map/world-map.jsx
index 9f179bfa3..d99d9cb5f 100644
--- a/src/components/world-map/world-map.jsx
+++ b/src/components/world-map/world-map.jsx
@@ -1,15 +1,17 @@
-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';
+const Plotly = require('plotly.js/lib/core');
 
 // Load in the trace type for choropleth
-Plotly.register([choropleth]);
+Plotly.register([
+    require('plotly.js/lib/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
@@ -84,4 +86,4 @@ WorldMap.propTypes = {
     countryNames: PropTypes.arrayOf(PropTypes.string)
 };
 
-export default WorldMap;
+module.exports = WorldMap;
diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 730f69a37..f174f2b61 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -15,6 +15,7 @@ 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');
@@ -22,11 +23,6 @@ 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
@@ -835,48 +831,44 @@ 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"
-                                                    colorIndex={colorIndex}
-                                                    countryData={countryData}
-                                                    countryNames={countryNames}
-                                                />
-                                            </MediaQuery>
-                                            <MediaQuery
-                                                maxWidth={frameless.desktop - 1}
-                                                minWidth={frameless.tabletPortrait}
-                                            >
-                                                <WorldMap
-                                                    className="map"
-                                                    colorIndex={colorIndex}
-                                                    countryData={countryData}
-                                                    countryNames={countryNames}
-                                                />
-                                            </MediaQuery>
-                                            <MediaQuery
-                                                maxWidth={frameless.tabletPortrait - 1}
-                                                minWidth={frameless.mobileIntermediate}
-                                            >
-                                                <WorldMap
-                                                    className="map"
-                                                    colorIndex={colorIndex}
-                                                    countryData={countryData}
-                                                    countryNames={countryNames}
-                                                />
-                                            </MediaQuery>
-                                            <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
-                                                <WorldMap
-                                                    className="map"
-                                                    colorIndex={colorIndex}
-                                                    countryData={countryData}
-                                                    countryNames={countryNames}
-                                                />
-                                            </MediaQuery>
-                                        </React.Suspense>
-                                    }
+                                    <MediaQuery minWidth={frameless.desktop}>
+                                        <WorldMap
+                                            className="map"
+                                            colorIndex={colorIndex}
+                                            countryData={countryData}
+                                            countryNames={countryNames}
+                                        />
+                                    </MediaQuery>
+                                    <MediaQuery
+                                        maxWidth={frameless.desktop - 1}
+                                        minWidth={frameless.tabletPortrait}
+                                    >
+                                        <WorldMap
+                                            className="map"
+                                            colorIndex={colorIndex}
+                                            countryData={countryData}
+                                            countryNames={countryNames}
+                                        />
+                                    </MediaQuery>
+                                    <MediaQuery
+                                        maxWidth={frameless.tabletPortrait - 1}
+                                        minWidth={frameless.mobileIntermediate}
+                                    >
+                                        <WorldMap
+                                            className="map"
+                                            colorIndex={colorIndex}
+                                            countryData={countryData}
+                                            countryNames={countryNames}
+                                        />
+                                    </MediaQuery>
+                                    <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
+                                        <WorldMap
+                                            className="map"
+                                            colorIndex={colorIndex}
+                                            countryData={countryData}
+                                            countryNames={countryNames}
+                                        />
+                                    </MediaQuery>
                                 </div>
                             </div>
                         </div>