feat: update nmrium to version 2.0.0

package.json

@@ -13,19 +13,19 @@
     "node": "24.4.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^6.8.0",
-    "@blueprintjs/icons": "^6.5.2",
-    "@blueprintjs/select": "^6.1.0",
+    "@blueprintjs/core": "^6.9.1",
+    "@blueprintjs/icons": "^6.6.0",
+    "@blueprintjs/select": "^6.1.3",
     "@emotion/styled": "^11.14.1",
     "@vitejs/plugin-react": "^5.1.4",
-    "@zakodium/nmrium-core": "^0.6.5",
-    "@zakodium/nmrium-core-plugins": "^0.6.39",
+    "@zakodium/nmrium-core": "^0.7.1",
+    "@zakodium/nmrium-core-plugins": "^0.7.1",
     "fifo-logger": "^2.0.1",
     "filelist-utils": "^1.11.3",
-    "nmr-processing": "^22.5.0",
-    "nmrium": "^1.12.0",
+    "nmr-processing": "^22.5.2",
+    "nmrium": "^2.0.0",
     "openchemlib": "^9.20.0",
-    "react-science": "^19.9.1"
+    "react-science": "^19.10.1"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -49,7 +49,7 @@
     "@playwright/test": "^1.58.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.3.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
@@ -61,8 +61,8 @@
     "prettier": "3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.13.0",
-    "serve": "^14.2.5",
+    "react-router-dom": "^7.13.1",
+    "serve": "^14.2.6",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-pwa": "^1.2.0"

src/Loadingindicator.tsx

@@ -0,0 +1,45 @@
+import { Spinner } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+const Overlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  gap: 12px;
+  user-select: none;
+  -webkit-user-select: none;
+`;
+
+const Label = styled.span`
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6b7280;
+`;
+
+interface LoadingIndicatorProps {
+  label?: string;
+  visible: boolean;
+}
+
+export function LoadingIndicator({
+  label = 'Loading',
+  visible,
+}: LoadingIndicatorProps) {
+  if (!visible) return null;
+
+  return (
+    <Overlay>
+      <Spinner size={36} />
+      <Label>{label}</Label>
+    </Overlay>
+  );
+}

src/NMRiumWrapper.tsx

@@ -1,55 +1,34 @@
-import type { NmriumData } from '@zakodium/nmrium-core';
 import type { NMRiumChangeCb, NMRiumRefAPI } from 'nmrium';
 import { NMRium } from 'nmrium';
 import type { CSSProperties } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import { RootLayout } from 'react-science/ui';
 
+import { LoadingIndicator } from './Loadingindicator.js';
 import events from './events/event.js';
-import type { NMRiumData } from './hooks/useLoadSpectra.js';
 import { useLoadSpectra } from './hooks/useLoadSpectra.js';
 import { usePreferences } from './hooks/usePreferences.js';
 import { useWhiteList } from './hooks/useWhiteList.js';
 import AboutUsModal from './modal/AboutUsModal.js';
 
-const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
-  container: {
-    height: '100%',
-    width: '100%',
-    position: 'relative',
-  },
-
-  loadingContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#ffffffc9',
-    fontSize: '1.4em',
-    userSelect: 'none',
-    WebkitUserSelect: 'none',
-  },
+const containerStyle: CSSProperties = {
+  height: '100%',
+  width: '100%',
+  position: 'relative',
 };
 
 export default function NMRiumWrapper() {
   const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
   const nmriumRef = useRef<NMRiumRefAPI>(null);
   const { workspace, preferences, defaultEmptyMessage, customWorkspaces } =
     usePreferences();
+
+  const { load: loadSpectra, data, isLoading } = useLoadSpectra();
+
   const dataChangeHandler = useCallback<NMRiumChangeCb>((state, source) => {
-    events.trigger('data-change', {
-      state,
-      source,
-    });
+    events.trigger('data-change', { state, source });
   }, []);
 
-  const { load: loadSpectra, data, setData } = useLoadSpectra();
-
   useEffect(() => {
     const clearActionListener = events.on(
       'action-request',
@@ -67,33 +46,36 @@ export default function NMRiumWrapper() {
           }
           default: {
             throw new Error(
-              `ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
+              `ERROR! Property 'type' accepts only 'exportViewerAsBlob'.`,
             );
           }
         }
       },
       { allowedOrigins },
     );
+
     const clearLoadListener = events.on(
       'load',
       (loadData) => {
         switch (loadData.type) {
-          case 'nmrium':
-            setData(loadData.data as unknown as NMRiumData);
+          case 'nmrium': {
+            const { data, activeTab = '' } = loadData;
+            void loadSpectra({ nmrium: data, activeTab });
             break;
+          }
           case 'file': {
             const { data: files, activeTab = '' } = loadData;
-            loadSpectra({ files, activeTab });
+            void loadSpectra({ files, activeTab });
             break;
           }
           case 'url': {
             const { data: urls, activeTab = '' } = loadData;
-            loadSpectra({ urls, activeTab });
+            void loadSpectra({ urls, activeTab });
             break;
           }
           default: {
             throw new Error(
-              `ERROR! Property 'type' accept only nmrium, url or file.`,
+              `ERROR! Property 'type' accepts only 'nmrium', 'url', or 'file'.`,
             );
           }
         }
@@ -106,16 +88,16 @@ export default function NMRiumWrapper() {
       clearActionListener();
     };
   });
+
+  const isShowingOverlay = isFetchAllowedOriginsPending || isLoading;
+
   return (
-    <RootLayout style={styles.container}>
-      {isFetchAllowedOriginsPending && (
-        <div style={styles.loadingContainer}>
-          <span>Loading .... </span>
-        </div>
-      )}
+    <RootLayout style={containerStyle}>
+      <LoadingIndicator visible={isShowingOverlay} />
       <NMRium
         ref={nmriumRef}
-        data={data as unknown as NmriumData}
+        state={data?.state}
+        aggregator={data?.aggregator}
         onChange={dataChangeHandler}
         preferences={preferences}
         workspace={workspace}

src/events/types.ts

@@ -26,6 +26,7 @@ type LoadData =
   | {
       data: NMRiumData;
       type: 'nmrium';
+      activeTab?: string;
     };
 
 interface ActionRequest {