Dynamically import markdown-node module

allegro · Mar 8, 2022 · 5578860 · 5578860
1 parent 3126e49
commit 5578860
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/src/client/components/info-bubble/info-bubble.tsx b/src/client/components/info-bubble/info-bubble.tsx
@@ -18,7 +18,6 @@ import * as React from "react";
 import { Stage } from "../../../common/models/stage/stage";
 import { classNames } from "../../utils/dom/dom";
 import { BubbleMenu, Direction } from "../bubble-menu/bubble-menu";
-import { MarkdownNode } from "../markdown-node/markdown-node";
 import { SvgIcon } from "../svg-icon/svg-icon";
 import "./info-bubble.scss";
 
@@ -60,6 +59,7 @@ export class InfoBubble extends React.Component<InfoBubbleProps, InfoBubbleState
     const { showInfo } = this.state;
     const { description, extendedDescription, icon, className, title } = this.props;
     const fullDescription = extendedDescription ? `${description}\n\n${extendedDescription}` : description;
+    const MarkdownNode = React.lazy(() => import(/* webpackChunkName: "markdown-node" */ "../markdown-node/markdown-node"));
 
     return <React.Fragment>
       <div className={classNames("info-button", className)} title={title || defaultTitle} onClick={this.showDescription}>
@@ -71,7 +71,9 @@ export class InfoBubble extends React.Component<InfoBubbleProps, InfoBubbleState
         onClose={this.closeDescription}
         stage={Stage.fromSize(300, 200)}
         openOn={showInfo.target}>
-        <MarkdownNode markdown={fullDescription} />
+        <React.Suspense>
+          <MarkdownNode markdown={fullDescription} />
+        </React.Suspense>
       </BubbleMenu>}
     </React.Fragment>;
   }

diff --git a/src/client/components/markdown-node/markdown-node.mocha.tsx b/src/client/components/markdown-node/markdown-node.mocha.tsx
@@ -17,7 +17,7 @@
 import { expect } from "chai";
 import { shallow } from "enzyme";
 import * as React from "react";
-import { MarkdownNode } from "./markdown-node";
+import MarkdownNode from "./markdown-node";
 
 describe("<MarkdownNode>", () => {
 

diff --git a/src/client/components/markdown-node/markdown-node.tsx b/src/client/components/markdown-node/markdown-node.tsx
@@ -26,8 +26,10 @@ function innerMarkdown(input: string): { __html: string } {
   return { __html: parse(input) };
 }
 
-export const MarkdownNode: React.SFC<MarkdownBubbleProps> = ({ markdown }) => {
+const MarkdownNode: React.SFC<MarkdownBubbleProps> = ({ markdown }) => {
   return <div
     className="markdown-content"
     dangerouslySetInnerHTML={innerMarkdown(markdown)} />;
 };
+
+export default MarkdownNode;
diff --git a/src/client/drag-and-drop-polyfill.ts b/src/client/drag-and-drop-polyfill.ts
@@ -24,9 +24,9 @@ export default function dragAndDropPolyfill() {
   if (needsPatch) {
     Promise.all([
       // @ts-ignore
-      import("../../lib/polyfill/drag-drop-polyfill.min.js"),
+      import(/* webpackChunkName: "dnd-js" */ "../../lib/polyfill/drag-drop-polyfill.min.js"),
       // @ts-ignore
-      import("../../lib/polyfill/drag-drop-polyfill.css")
+      import(/* webpackChunkName: "dnd-css" */ "../../lib/polyfill/drag-drop-polyfill.css")
     ]).then(([DragDropPolyfill, _]) => {
       DragDropPolyfill.Initialize({});
     });

diff --git a/src/client/views/home-view/data-cube-card/data-cube-card.tsx b/src/client/views/home-view/data-cube-card/data-cube-card.tsx
@@ -16,8 +16,8 @@
  */
 
 import * as React from "react";
-import { MarkdownNode } from "../../../components/markdown-node/markdown-node";
 import { SvgIcon } from "../../../components/svg-icon/svg-icon";
+import { Loader } from "../../../components/loader/loader";
 import { STRINGS } from "../../../config/constants";
 import "./data-cube-card.scss";
 
@@ -48,8 +48,11 @@ export class DataCubeCard extends React.Component<DataCubeCardProps, DataCubeCar
 
   renderDescription() {
     const { description, extendedDescription } = this.props;
+    const MarkdownNode = React.lazy(() => import(/* webpackChunkName: "markdown-node" */ "../../../components/markdown-node/markdown-node"));
     if (!extendedDescription) {
-      return <MarkdownNode markdown={description || STRINGS.noDescription} />;
+      return <React.Suspense fallback={Loader}>
+          <MarkdownNode markdown={description || STRINGS.noDescription} />
+        </React.Suspense>;
     }
 
     const { showingMore } = this.state;
@@ -58,7 +61,9 @@ export class DataCubeCard extends React.Component<DataCubeCardProps, DataCubeCar
     const action = showingMore ? this.showLess : this.showMore;
 
     return <React.Fragment>
-      <MarkdownNode markdown={content} />
+      <React.Suspense fallback={Loader}>
+        <MarkdownNode markdown={content} />
+      </React.Suspense>
       <div className="show-more-action" onClick={action}>{actionLabel}</div>
     </React.Fragment>;
   }