From 0139a322132bc6cc302e449f9d60cce12606cffd Mon Sep 17 00:00:00 2001 From: ankitmhn Date: Thu, 2 Apr 2020 12:29:17 +0530 Subject: [PATCH] chore: Switch asyncComponent to React Lazy/Suspense (Closes #1577) (#1582) * Attempted Lazy load for OHIFCornerStoneViewport * Converted dicom-(html, microscopy, pdf) & cornerstone extensions to React Lazy components * Fixed incorrect import from OHIFDicomPDFSopClassHandler to ConnectedOHIFDicomPDFViewer Co-authored-by: Ankit Mohan Co-authored-by: Erik Ziegler --- extensions/cornerstone/src/asyncComponent.js | 37 ------------------- extensions/cornerstone/src/index.js | 18 ++++++--- extensions/dicom-html/src/asyncComponent.js | 37 ------------------- extensions/dicom-html/src/index.js | 18 ++++++--- .../dicom-microscopy/src/asyncComponent.js | 37 ------------------- extensions/dicom-microscopy/src/index.js | 18 ++++++--- extensions/dicom-pdf/src/asyncComponent.js | 37 ------------------- extensions/dicom-pdf/src/index.js | 18 ++++++--- 8 files changed, 48 insertions(+), 172 deletions(-) delete mode 100644 extensions/cornerstone/src/asyncComponent.js delete mode 100644 extensions/dicom-html/src/asyncComponent.js delete mode 100644 extensions/dicom-microscopy/src/asyncComponent.js delete mode 100644 extensions/dicom-pdf/src/asyncComponent.js diff --git a/extensions/cornerstone/src/asyncComponent.js b/extensions/cornerstone/src/asyncComponent.js deleted file mode 100644 index e8f344a35..000000000 --- a/extensions/cornerstone/src/asyncComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * We use this component to leverage "Code Splitting" - * - * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html - */ - -import React, { Component } from 'react'; - -export default function asyncComponent(importComponent) { - class AsyncComponent extends Component { - constructor(props) { - super(props); - - this.state = { - component: null, - }; - } - - async componentDidMount() { - // Add dynamically loaded component to state - const { default: component } = await importComponent(); - - this.setState({ - component: component, - }); - } - - render() { - const C = this.state.component; - - // Render the loaded component, or null - return C ? : null; - } - } - - return AsyncComponent; -} diff --git a/extensions/cornerstone/src/index.js b/extensions/cornerstone/src/index.js index 104ba4f51..bfeba884e 100644 --- a/extensions/cornerstone/src/index.js +++ b/extensions/cornerstone/src/index.js @@ -1,14 +1,20 @@ +import React from 'react'; import init from './init.js'; -import asyncComponent from './asyncComponent.js'; import commandsModule from './commandsModule.js'; import toolbarModule from './toolbarModule.js'; import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm'; -const OHIFCornerstoneViewport = asyncComponent(() => - import( - /* webpackChunkName: "OHIFCornerstoneViewport" */ './OHIFCornerstoneViewport.js' - ) -); +const Component = React.lazy(() => { + return import('./OHIFCornerstoneViewport'); +}); + +const OHIFCornerstoneViewport = props => { + return ( + Loading...}> + + + ); +}; /** * diff --git a/extensions/dicom-html/src/asyncComponent.js b/extensions/dicom-html/src/asyncComponent.js deleted file mode 100644 index e8f344a35..000000000 --- a/extensions/dicom-html/src/asyncComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * We use this component to leverage "Code Splitting" - * - * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html - */ - -import React, { Component } from 'react'; - -export default function asyncComponent(importComponent) { - class AsyncComponent extends Component { - constructor(props) { - super(props); - - this.state = { - component: null, - }; - } - - async componentDidMount() { - // Add dynamically loaded component to state - const { default: component } = await importComponent(); - - this.setState({ - component: component, - }); - } - - render() { - const C = this.state.component; - - // Render the loaded component, or null - return C ? : null; - } - } - - return AsyncComponent; -} diff --git a/extensions/dicom-html/src/index.js b/extensions/dicom-html/src/index.js index 216b377dd..ce7f58d56 100644 --- a/extensions/dicom-html/src/index.js +++ b/extensions/dicom-html/src/index.js @@ -1,11 +1,17 @@ -import asyncComponent from './asyncComponent.js'; +import React from 'react'; import OHIFDicomHtmlSopClassHandler from './OHIFDicomHtmlSopClassHandler.js'; -const OHIFDicomHtmlViewport = asyncComponent(() => - import( - /* webpackChunkName: "OHIFDicomHtmlViewport" */ './OHIFDicomHtmlViewport.js' - ) -); +const Component = React.lazy(() => { + return import('./OHIFDicomHtmlViewport'); +}); + +const OHIFDicomHtmlViewport = props => { + return ( + Loading...}> + + + ); +}; export default { /** diff --git a/extensions/dicom-microscopy/src/asyncComponent.js b/extensions/dicom-microscopy/src/asyncComponent.js deleted file mode 100644 index e8f344a35..000000000 --- a/extensions/dicom-microscopy/src/asyncComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * We use this component to leverage "Code Splitting" - * - * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html - */ - -import React, { Component } from 'react'; - -export default function asyncComponent(importComponent) { - class AsyncComponent extends Component { - constructor(props) { - super(props); - - this.state = { - component: null, - }; - } - - async componentDidMount() { - // Add dynamically loaded component to state - const { default: component } = await importComponent(); - - this.setState({ - component: component, - }); - } - - render() { - const C = this.state.component; - - // Render the loaded component, or null - return C ? : null; - } - } - - return AsyncComponent; -} diff --git a/extensions/dicom-microscopy/src/index.js b/extensions/dicom-microscopy/src/index.js index 604b8a0dc..cc3e6d9ff 100644 --- a/extensions/dicom-microscopy/src/index.js +++ b/extensions/dicom-microscopy/src/index.js @@ -1,11 +1,17 @@ -import asyncComponent from './asyncComponent.js'; +import React from 'react'; import DicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler.js'; -const DicomMicroscopyViewport = asyncComponent(() => - import( - /* webpackChunkName: "DicomMicroscopyViewport" */ './DicomMicroscopyViewport.js' - ) -); +const Component = React.lazy(() => { + return import('./DicomMicroscopyViewport'); +}); + +const DicomMicroscopyViewport = props => { + return ( + Loading...}> + + + ); +}; export default { /** diff --git a/extensions/dicom-pdf/src/asyncComponent.js b/extensions/dicom-pdf/src/asyncComponent.js deleted file mode 100644 index e8f344a35..000000000 --- a/extensions/dicom-pdf/src/asyncComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * We use this component to leverage "Code Splitting" - * - * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html - */ - -import React, { Component } from 'react'; - -export default function asyncComponent(importComponent) { - class AsyncComponent extends Component { - constructor(props) { - super(props); - - this.state = { - component: null, - }; - } - - async componentDidMount() { - // Add dynamically loaded component to state - const { default: component } = await importComponent(); - - this.setState({ - component: component, - }); - } - - render() { - const C = this.state.component; - - // Render the loaded component, or null - return C ? : null; - } - } - - return AsyncComponent; -} diff --git a/extensions/dicom-pdf/src/index.js b/extensions/dicom-pdf/src/index.js index 3e4c55a85..705caeb4b 100644 --- a/extensions/dicom-pdf/src/index.js +++ b/extensions/dicom-pdf/src/index.js @@ -1,11 +1,17 @@ -import asyncComponent from './asyncComponent.js'; +import React from 'react'; import OHIFDicomPDFSopClassHandler from './OHIFDicomPDFSopClassHandler.js'; -const ConnectedOHIFDicomPDFViewer = asyncComponent(() => - import( - /* webpackChunkName: "ConnectedOHIFDicomPDFViewer" */ './ConnectedOHIFDicomPDFViewer' - ) -); +const Component = React.lazy(() => { + return import('./ConnectedOHIFDicomPDFViewer'); +}); + +const ConnectedOHIFDicomPDFViewer = props => { + return ( + Loading...}> + + + ); +}; export default { /**