From 2a479120b6348a0dbf6c593400c7a02b911d2aff Mon Sep 17 00:00:00 2001
From: gairon <gairon@mail.ru>
Date: Wed, 24 May 2023 14:27:30 +0300
Subject: [PATCH] #2655 - Add dynamic load for Miew (#2661)

* Add lazy loading for miew-react
* Fix build errors if any
---
 .../src/script/editor/tool/template.ts        |  4 +--
 .../components/process/Miew/Miew.module.less  |  8 +++++
 .../modal/components/process/Miew/Miew.tsx    | 30 +++++++++++++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/ketcher-react/src/script/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
index 8fe53a989b..fc7c66c9d5 100644
--- 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
index d424574956..e38ed2c8c5 100644
--- 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
index 37d69d04f4..f666d2ab36 100644
--- 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>