geosolutions-it#4297 Use suspense for plotly (geosolutions-it#6622)

web/client/components/charts/PlotlyChart.jsx

@@ -1,4 +1,5 @@
 // customizable method: use your own `Plotly` object
 import createPlotlyComponent from 'react-plotly.js/factory';
 import Plotly from 'plotly.js-cartesian-dist';
-export const Plot = createPlotlyComponent(Plotly);
+const Plot = createPlotlyComponent(Plotly);
+export default Plot;

web/client/components/charts/WidgetChart.jsx

@@ -6,11 +6,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import { Plot } from './PlotlyChart';
+import React, { Suspense } from 'react';
 import { sameToneRangeColors } from '../../utils/ColorUtils';
 import { parseExpression } from '../../utils/ExpressionUtils';
+import LoadingView from '../misc/LoadingView';
 
+const Plot = React.lazy(() => import('./PlotlyChart'));
 
 export const COLOR_DEFAULTS = {
     base: 190,
@@ -196,11 +197,13 @@ export default function WidgetChart({
 }) {
     const { data, layout, config } = toPlotly(props);
     return (
-        <Plot
-            onInitialized={onInitialized}
-            data={data}
-            layout={layout}
-            config={config}
-        />
+        <Suspense fallback={<LoadingView />}>
+            <Plot
+                onInitialized={onInitialized}
+                data={data}
+                layout={layout}
+                config={config}
+            />
+        </Suspense>
     );
 }