#2655 - Add dynamic load for Miew (#2661)

* Add lazy loading for miew-react * Fix build errors if any
epam · May 24, 2023 · 3b46db1 · 3b46db1
1 parent 5868142
commit 3b46db1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/packages/ketcher-react/src/script/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
@@ -153,7 +153,7 @@ class TemplateTool {
       })
   }
 
-  async mousedown(event) {
+  async mousedown(event: MouseEvent) {
     this.event = event
 
     if (this.functionalGroups.size) {
@@ -187,7 +187,7 @@ class TemplateTool {
     this.editor.hover(null)
 
     this.dragCtx = {
-      xy0: this.editor.render.page2obj(this.event),
+      xy0: this.editor.render.page2obj(event),
       item: this.editor.findItem(this.event, this.findItems)
     }
 

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/process/Miew/Miew.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/process/Miew/Miew.module.less
@@ -60,6 +60,14 @@
   }
 }
 
+.loadingContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .miewDarkTheme {
   // stylelint-disable-next-line selector-pseudo-class-no-unknown
   :global(.atom-info) {

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/process/Miew/Miew.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/process/Miew/Miew.tsx
@@ -14,7 +14,8 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Dialog } from '../../../../components'
+import { lazy, Suspense, useCallback, useRef, useState } from 'react'
+import { Dialog, LoadingCircles } from '../../../../components'
 import {
   FormatterFactory,
   Struct,
@@ -26,9 +27,9 @@ import classes from './Miew.module.less'
 import { connect } from 'react-redux'
 import { load } from '../../../../../state'
 import { pick } from 'lodash/fp'
-import Viewer from 'miew-react'
 import { Miew as MiewAsType } from 'miew'
-import { useCallback, useRef } from 'react'
+
+const Viewer = lazy(() => import('miew-react'))
 
 type MiewDialogProps = {
   miewOpts: any
@@ -117,6 +118,7 @@ const MiewDialog = ({
   ...prop
 }: Props) => {
   const miewRef = useRef<MiewAsType>()
+  const [isInitialized, setIsIsInitialized] = useState(false)
 
   const onMiewInit = useCallback(
     (miew: MiewAsType) => {
@@ -129,7 +131,10 @@ const MiewDialog = ({
         .then((res) =>
           miew.load(res, { sourceType: 'immediate', fileType: 'cml' })
         )
-        .then(() => miew.setOptions(miewOpts))
+        .then(() => {
+          miew.setOptions(miewOpts)
+          setIsIsInitialized(true)
+        })
         .catch((ex) => console.error(ex.message))
     },
     [miewOpts, server, struct]
@@ -150,7 +155,12 @@ const MiewDialog = ({
       params={prop}
       buttons={[
         'Cancel',
-        <button key="apply" onClick={exportCML} className={classes.applyButton}>
+        <button
+          key="apply"
+          onClick={exportCML}
+          className={classes.applyButton}
+          disabled={!isInitialized}
+        >
           Apply
         </button>
       ]}
@@ -163,7 +173,15 @@ const MiewDialog = ({
             miewTheme === 'dark' ? classes.miewDarkTheme : ''
           }`}
         >
-          <Viewer onInit={onMiewInit} />
+          <Suspense
+            fallback={
+              <div className={classes.loadingContainer}>
+                <LoadingCircles />
+              </div>
+            }
+          >
+            <Viewer onInit={onMiewInit} />
+          </Suspense>
         </div>
       </div>
     </Dialog>