Remove React.Suspense for lazy loading of Visualisation.

It caused full rerenders of Visualisation whenever CubeView rendered
allegro · Mar 30, 2022 · 4a25062 · 4a25062
1 parent a3fb9e6
commit 4a25062
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 49 deletions.
diff --git a/src/client/components/drop-indicator/drop-indicator.tsx b/src/client/components/drop-indicator/drop-indicator.tsx
@@ -19,20 +19,11 @@ import React from "react";
 import { SvgIcon } from "../svg-icon/svg-icon";
 import "./drop-indicator.scss";
 
-export interface DropIndicatorProps {
-}
-
-export interface DropIndicatorState {
-}
-
-export class DropIndicator extends React.Component<DropIndicatorProps, DropIndicatorState> {
-
-  render() {
-    return <div className="drop-indicator">
-      <div className="white-out"></div>
-      <div className="action">
-        <SvgIcon svg={require("../../icons/split-replace.svg")} />
-      </div>
-    </div>;
-  }
+export function DropIndicator() {
+  return <div className="drop-indicator">
+    <div className="white-out"/>
+    <div className="action">
+      <SvgIcon svg={require("../../icons/split-replace.svg")}/>
+    </div>
+  </div>;
 }
diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx
@@ -44,7 +44,6 @@ import { maxTimeQuery } from "../../../common/utils/query/max-time-query";
 import { datesEqual } from "../../../common/utils/time/time";
 import { DimensionMeasurePanel } from "../../components/dimension-measure-panel/dimension-measure-panel";
 import { GlobalEventListener } from "../../components/global-event-listener/global-event-listener";
-import { Loader } from "../../components/loader/loader";
 import { PinboardPanel } from "../../components/pinboard-panel/pinboard-panel";
 import { Direction, DragHandle, ResizeHandle } from "../../components/resize-handle/resize-handle";
 import { SideDrawer } from "../../components/side-drawer/side-drawer";
@@ -564,7 +563,7 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
       updatingMaxTime={updatingMaxTime}
     />;
 
-    const Visualization = React.lazy(getVisualizationComponent(essence.visualization));
+    const Visualization = getVisualizationComponent(essence.visualization);
 
     return <CubeContext.Provider value={this.getCubeContext()}>
       <DownloadableDatasetProvider>
@@ -599,26 +598,24 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
                      onClick={this.toggleFactPanel}>
                   <ToggleArrow right={layout.factPanel.hidden}/>
                 </div>
-                <React.Suspense fallback={Loader}>
-                  <Visualization
-                    essence={essence}
-                    clicker={clicker}
-                    timekeeper={timekeeper}
-                    stage={this.chartStage()}
-                    customization={customization}
-                    addSeries={addSeries}
-                    addFilter={addFilter}
-                    lastRefreshRequestTimestamp={lastRefreshRequestTimestamp}
-                    partialFilter={filter}
-                    partialSeries={series}
-                    removeTile={removeTile}
-                    dragEnter={this.dragEnter}
-                    dragOver={this.dragOver}
-                    isDraggedOver={dragOver}
-                    dragLeave={this.dragLeave}
-                    drop={this.drop}
-                  />
-                </React.Suspense>
+                <Visualization
+                  essence={essence}
+                  clicker={clicker}
+                  timekeeper={timekeeper}
+                  stage={this.chartStage()}
+                  customization={customization}
+                  addSeries={addSeries}
+                  addFilter={addFilter}
+                  lastRefreshRequestTimestamp={lastRefreshRequestTimestamp}
+                  partialFilter={filter}
+                  partialSeries={series}
+                  removeTile={removeTile}
+                  dragEnter={this.dragEnter}
+                  dragOver={this.dragOver}
+                  isDraggedOver={dragOver}
+                  dragLeave={this.dragLeave}
+                  drop={this.drop}
+                />
                 <div className="pinboard-toggle"
                      onClick={this.togglePinboard}>
                   <ToggleArrow right={!layout.pinboard.hidden}/>

diff --git a/src/client/visualizations/index.ts b/src/client/visualizations/index.ts
@@ -15,21 +15,27 @@
  * limitations under the License.
  */
 
+import React from "react";
 import { VisualizationManifest } from "../../common/models/visualization-manifest/visualization-manifest";
 import { VisualizationProps } from "../views/cube-view/center-panel/center-panel";
+import BarChartVisualization from "./bar-chart/bar-chart";
+import GridVisualization from "./grid/grid";
+import HeatMapVisualization from "./heat-map/heat-map";
+import LineChartVisualization from "./line-chart/line-chart";
+import ScatterplotVisualization from "./scatterplot/scatterplot";
+import TableVisualization from "./table/table";
+import TotalsVisualization from "./totals/totals";
 
-const VISUALIZATIONS  = {
-  "totals": () => import(/* webpackChunkName: "totals" */ "./totals/totals"),
-  "table": () => import(/* webpackChunkName: "table" */ "./table/table"),
-  "line-chart": () => import(/* webpackChunkName: "line-chart" */ "./line-chart/line-chart"),
-  "bar-chart": () => import(/* webpackChunkName: "bar-chart" */ "./bar-chart/bar-chart"),
-  "heatmap": () => import(/* webpackChunkName: "heatmap" */ "./heat-map/heat-map"),
-  "grid": () => import(/* webpackChunkName: "grid" */ "./grid/grid"),
-  "scatterplot": () => import(/* webpackChunkName: "scatterplot" */ "./scatterplot/scatterplot")
+const VISUALIZATIONS = {
+  "totals": TotalsVisualization,
+  "table": TableVisualization,
+  "line-chart": LineChartVisualization,
+  "bar-chart": BarChartVisualization,
+  "heatmap": HeatMapVisualization,
+  "grid": GridVisualization,
+  "scatterplot": ScatterplotVisualization
 };
 
-export function getVisualizationComponent({ name }: VisualizationManifest): () => Promise<{
-  default: React.ComponentType<VisualizationProps>;
-}> {
+export function getVisualizationComponent({ name }: VisualizationManifest): React.ComponentType<VisualizationProps> {
   return VISUALIZATIONS[name];
 }