feat: lazily load plugin scripts and dependencies when needed (DHIS2-…

…10518) (#1546)

* feat: dynamically load plugin scripts and dependencies when needed

* chore: fix some tests

* fix: wait for in-flight fetches of the same plugin type

* fix: move visualizer props to DataVisualizerPlugin

* fix: remove unused state

* fix: change var name to avoid confusion between plugin and vis loading

Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>

d2.config.js

@@ -1,4 +1,5 @@
 const config = {
+    name: 'dashboard',
     type: 'app',
     coreApp: true,
     title: 'Dashboard',

src/components/Item/VisualizationItem/Visualization/DataVisualizerPlugin.js

@@ -0,0 +1,38 @@
+import React, { Suspense, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useD2 } from '@dhis2/app-runtime-adapter-d2'
+import { useUserSettings } from '../../../UserSettingsProvider'
+import LoadingMask from './LoadingMask'
+
+const VisualizationPlugin = React.lazy(() =>
+    import(
+        /* webpackChunkName: "data-visualizer-plugin" */ /* webpackPrefetch: true */ '@dhis2/data-visualizer-plugin'
+    )
+)
+
+const DataVisualizerPlugin = props => {
+    const d2 = useD2()
+    const { userSettings } = useUserSettings()
+    const [visualizationLoaded, setVisualizationLoaded] = useState(false)
+
+    return (
+        <Suspense fallback={<div />}>
+            {!visualizationLoaded && <LoadingMask style={props.style} />}
+            <VisualizationPlugin
+                d2={d2}
+                forDashboard={true}
+                userSettings={{
+                    displayProperty: userSettings.keyAnalysisDisplayProperty,
+                }}
+                onLoadingComplete={() => setVisualizationLoaded(true)}
+                {...props}
+            />
+        </Suspense>
+    )
+}
+
+DataVisualizerPlugin.propTypes = {
+    style: PropTypes.object,
+}
+
+export default DataVisualizerPlugin

src/components/Item/VisualizationItem/Visualization/LoadingMask.js

@@ -1,14 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { CircularLoader } from '@dhis2/ui'
 
 import classes from './styles/LoadingMask.module.css'
 
-const LoadingMask = () => {
+const LoadingMask = ({ style }) => {
     return (
-        <div className={classes.center}>
+        <div className={classes.center} style={style}>
             <CircularLoader />
         </div>
     )
 }
 
+LoadingMask.propTypes = {
+    style: PropTypes.object,
+}
+
 export default LoadingMask

src/components/Item/VisualizationItem/Visualization/Visualization.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import VisualizationPlugin from '@dhis2/data-visualizer-plugin'
 import i18n from '@dhis2/d2-i18n'
-import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 
 import DefaultPlugin from './DefaultPlugin'
 import MapPlugin from './MapPlugin'
-import LoadingMask from './LoadingMask'
+import DataVisualizerPlugin from './DataVisualizerPlugin'
 import NoVisualizationMessage from './NoVisualizationMessage'
 
 import getFilteredVisualization from './getFilteredVisualization'
@@ -21,14 +19,9 @@ import {
 import { getVisualizationId } from '../../../../modules/item'
 import memoizeOne from '../../../../modules/memoizeOne'
 import { sGetVisualization } from '../../../../reducers/visualizations'
-import { UserSettingsCtx } from '../../../UserSettingsProvider'
 import { pluginIsAvailable } from './plugin'
 
 class Visualization extends React.Component {
-    state = {
-        pluginLoaded: false,
-    }
-
     constructor(props) {
         super(props)
 
@@ -38,10 +31,6 @@ class Visualization extends React.Component {
         this.memoizedGetVisualizationConfig = memoizeOne(getVisualizationConfig)
     }
 
-    onLoadingComplete = () => {
-        this.setState({ pluginLoaded: true })
-    }
-
     render() {
         const {
             visualization,
@@ -82,32 +71,13 @@ class Visualization extends React.Component {
             case CHART:
             case REPORT_TABLE: {
                 return (
-                    <>
-                        {!this.state.pluginLoaded && (
-                            <div style={pluginProps.style}>
-                                <LoadingMask />
-                            </div>
+                    <DataVisualizerPlugin
+                        visualization={this.memoizedGetFilteredVisualization(
+                            pluginProps.visualization,
+                            pluginProps.itemFilters
                         )}
-                        <D2Shim d2Config={{}}>
-                            {({ d2 }) => (
-                                <VisualizationPlugin
-                                    d2={d2}
-                                    visualization={this.memoizedGetFilteredVisualization(
-                                        pluginProps.visualization,
-                                        pluginProps.itemFilters
-                                    )}
-                                    onLoadingComplete={this.onLoadingComplete}
-                                    forDashboard={true}
-                                    style={pluginProps.style}
-                                    userSettings={{
-                                        displayProperty: this.context
-                                            .userSettings
-                                            .keyAnalysisDisplayProperty,
-                                    }}
-                                />
-                            )}
-                        </D2Shim>
-                    </>
+                        style={pluginProps.style}
+                    />
                 )
             }
             case MAP: {
@@ -140,8 +110,6 @@ class Visualization extends React.Component {
     }
 }
 
-Visualization.contextType = UserSettingsCtx
-
 Visualization.propTypes = {
     activeType: PropTypes.string,
     availableHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),