- updated univerjs import;

src/components/FormField/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { isNil } from 'ramda';
 import { classNames } from 'primereact/utils';
 
@@ -19,7 +19,7 @@ import Table from './components/Table';
 import PasswordField from './components/PasswordField';
 import CriteriaTable from './components/CriteriaTable';
 import FileSelect from './components/FileSelect';
-import Spreadsheet from './components/Spreadsheet';
+const Spreadsheet = React.lazy(() => import('./components/Spreadsheet'));
 
 const FormField = (props) => {
     const fields = {
@@ -45,7 +45,9 @@ const FormField = (props) => {
 
     return (!isNil(Comp)
             ? <div className={classNames(['appForm__field', props.type, props.additionalClass])}>
+                <Suspense fallback={null}>
                     <Comp {...props} />
+                </Suspense>
             </div>
             : null
     )

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { head, is, isEmpty, isNil, uniq } from 'ramda';
 
@@ -18,13 +18,13 @@ import { InputSwitch } from 'primereact/inputswitch';
 import ElementSettingChips from '../ElementSettingChips';
 import ElementSettingCriteriaTableColumns from '../ElementSettingCriteriaTableColumns';
 import ElementSettingTableColumnsForCsv from '../ElementSettingTableColumnsForCsv';
-import ElementSettingSpreadsheet from '../ElementSettingSpreadsheet';
-
 import { mimeTypes } from '../../../../../../configData';
 import ElementSettingReportHeader from '../ElementSettingReportHeader';
 import ElementSettingReportEnable from '../ElementSettingReportEnable';
 import getTokens from '../../../../../../helpers/getTokens';
 
+const ElementSettingSpreadsheet = React.lazy(() => import('../ElementSettingSpreadsheet'));
+
 
 const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
     const [existingVars, setExistingVars] = useState([]);
@@ -159,10 +159,12 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
                 bandoStatus={bandoStatus}
                 setDataFn={updateDataFn}/>
         } else if (setting.name === 'template') {
-            return <ElementSettingSpreadsheet
+            return <Suspense fallback={null}>
+                <ElementSettingSpreadsheet
                     value={setting.value}
                     name={setting.name}
-                setDataFn={updateDataFn}/>;
+                    setDataFn={updateDataFn}/>
+            </Suspense>;
         } else if (setting.name === 'formula') {
             const isInvalid = invalidFormula(setting.value);
             return <>