From 8630a00c8662f1f10e3d7aab74433fed74a796d7 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 30 Mar 2022 15:41:04 +0200
Subject: [PATCH] Memoize Viz Chunk so Suspense won't get new Promise every
 time.

---
 src/client/views/cube-view/cube-view.tsx | 9 +++++++--
 src/client/visualizations/index.ts       | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx
index ed0270fa3..ae9f5fd2a 100644
--- a/src/client/views/cube-view/cube-view.tsx
+++ b/src/client/views/cube-view/cube-view.tsx
@@ -36,7 +36,10 @@ import { Splits } from "../../../common/models/splits/splits";
 import { Stage } from "../../../common/models/stage/stage";
 import { TimeShift } from "../../../common/models/time-shift/time-shift";
 import { Timekeeper } from "../../../common/models/timekeeper/timekeeper";
-import { VisualizationManifest } from "../../../common/models/visualization-manifest/visualization-manifest";
+import {
+  Visualization,
+  VisualizationManifest
+} from "../../../common/models/visualization-manifest/visualization-manifest";
 import { VisualizationSettings } from "../../../common/models/visualization-settings/visualization-settings";
 import { Binary, Ternary } from "../../../common/utils/functional/functional";
 import { Fn } from "../../../common/utils/general/general";
@@ -530,6 +533,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
     ([nextEssence, nextClicker]: [Essence, Clicker], [prevEssence, prevClicker]: [Essence, Clicker]) =>
       nextEssence.equals(prevEssence) && nextClicker === prevClicker);
 
+  private getVisualization = memoizeOne((name: Visualization) => React.lazy(getVisualizationComponent(name)));
+
   render() {
     const clicker = this.clicker;
 
@@ -564,7 +569,7 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
       updatingMaxTime={updatingMaxTime}
     />;
 
-    const Visualization = React.lazy(getVisualizationComponent(essence.visualization));
+    const Visualization = this.getVisualization(essence.visualization.name);
 
     return <CubeContext.Provider value={this.getCubeContext()}>
       <DownloadableDatasetProvider>
diff --git a/src/client/visualizations/index.ts b/src/client/visualizations/index.ts
index 4ecd5ba63..fc780a87b 100644
--- a/src/client/visualizations/index.ts
+++ b/src/client/visualizations/index.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { VisualizationManifest } from "../../common/models/visualization-manifest/visualization-manifest";
+import { Visualization } from "../../common/models/visualization-manifest/visualization-manifest";
 import { VisualizationProps } from "../views/cube-view/center-panel/center-panel";
 
 const VISUALIZATIONS  = {
@@ -28,7 +28,7 @@ const VISUALIZATIONS  = {
   "scatterplot": () => import(/* webpackChunkName: "scatterplot" */ "./scatterplot/scatterplot")
 };
 
-export function getVisualizationComponent({ name }: VisualizationManifest): () => Promise<{
+export function getVisualizationComponent(name: Visualization): () => Promise<{
   default: React.ComponentType<VisualizationProps>;
 }> {
   return VISUALIZATIONS[name];