diff --git a/src/Widgets/LayoutSelectWidget.jsx b/src/Widgets/LayoutSelectWidget.jsx
index 5588238..2156f4d 100644
--- a/src/Widgets/LayoutSelectWidget.jsx
+++ b/src/Widgets/LayoutSelectWidget.jsx
@@ -6,7 +6,9 @@
import React, { Component } from 'react';
import { compose } from 'redux';
import { defineMessages, injectIntl } from 'react-intl';
-import Select, { components } from 'react-select';
+
+import loadable from '@loadable/component';
+
import { isEqual } from 'lodash';
import { variants } from '../grid';
import { FormFieldWrapper, Icon } from '@plone/volto/components';
@@ -17,6 +19,8 @@ import {
} from '@plone/volto/components/manage/Widgets/SelectStyling';
import checkSVG from '@plone/volto/icons/check.svg';
+const ReactSelectLib = loadable.lib(() => import('react-select'));
+
const gridColsAreEqual = (gridCols1, gridCols2) => {
return isEqual(gridCols1, gridCols2);
};
@@ -27,21 +31,27 @@ const variantToGridCols = (v) => {
export const Option = (props) => {
return (
-
-
- gridColsAreEqual(variantToGridCols(v), props.value),
- ).icon
- }
- size="24px"
- />
- {props.label}
- {props.isFocused && !props.isSelected && (
-
- )}
- {props.isSelected && }
-
+
+ {({ components }) => {
+ return (
+
+
+ gridColsAreEqual(variantToGridCols(v), props.value),
+ ).icon
+ }
+ size="24px"
+ />
+ {props.label}
+ {props.isFocused && !props.isSelected && (
+
+ )}
+ {props.isSelected && }
+
+ );
+ }}
+
);
};
@@ -119,25 +129,31 @@ export class LayoutSelectWidget extends Component {
return (
-
);
}