Lazy load react-dropzone

CHANGELOG.md

@@ -12,6 +12,8 @@
 
 ### Internal
 
+- lazy load react-dropzone @nileshgulia1
+
 ## 10.1.0 (2020-11-30)
 
 ### Feature
@@ -90,12 +92,13 @@ See https://docs.voltocms.com/upgrade-guide/ for more information.
   Razzle 3.3.7 prepares the transition to the upcoming Razzle 4 so it improves and
   unifies the extensibility story at the cost of change the signature of the
   `razzle.config.js` and how plugins are declared. It also enables by default the new
-  *React Fast Refresh* feature implemented by the React community, which improves the
+  _React Fast Refresh_ feature implemented by the React community, which improves the
   refresh of the code while in development.
 
 - Babel plugins housekeeping
 
   Deprecated proposals:
+
   - @babel/plugin-proposal-function-bind
   - @babel/plugin-proposal-do-expressions
   - @babel/plugin-proposal-logical-assignment-operators

src/components/manage/Blocks/Image/Edit.jsx

@@ -10,8 +10,8 @@ import { compose } from 'redux';
 import { readAsDataURL } from 'promise-file-reader';
 import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 import cx from 'classnames';
-import Dropzone from 'react-dropzone';
 
 import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
@@ -27,6 +27,10 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
 
+const Dropzone = loadable(() => import('react-dropzone'), {
+  resolveComponent: (components) => components.Dropzone,
+});
+
 const messages = defineMessages({
   ImageBlockInputPlaceholder: {
     id: 'Browse the site, drop an image, or type an URL',

src/components/manage/Blocks/Image/Edit.test.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { waitFor } from '@testing-library/react';
 
 import Edit from './Edit';
 
 const mockStore = configureStore();
 
 const blockId = '1234';
 
-test('renders an edit image block component', () => {
+test('renders an edit image block component', async () => {
   const store = mockStore({
     content: {
       create: {},
@@ -48,5 +49,6 @@ test('renders an edit image block component', () => {
     </Provider>,
   );
   const json = component.toJSON();
+  await waitFor(() => {});
   expect(json).toMatchSnapshot();
 });

src/components/manage/Contents/ContentsUploadModal.jsx

@@ -18,14 +18,18 @@ import {
   Table,
   Segment,
 } from 'semantic-ui-react';
-import Dropzone from 'react-dropzone';
+import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
 import moment from 'moment';
 import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { createContent } from '@plone/volto/actions';
 
+const Dropzone = loadable(() => import('react-dropzone'), {
+  resolveComponent: (components) => components.Dropzone,
+});
+
 const messages = defineMessages({
   cancel: {
     id: 'Cancel',

src/components/manage/Contents/ContentsUploadModal.test.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
+import { waitFor } from '@testing-library/react';
 import ContentsUploadModal from './ContentsUploadModal';
 
 const mockStore = configureStore();
 
 describe('ContentsUploadModal', () => {
-  it('renders a contents upload modal component', () => {
+  it('renders a contents upload modal component', async () => {
     const store = mockStore({
       content: {
         create: {
@@ -32,6 +32,7 @@ describe('ContentsUploadModal', () => {
       </Provider>,
     );
     const json = component.toJSON();
+    await waitFor(() => {});
     expect(json).toMatchSnapshot();
   });
 });

src/components/manage/Preferences/PersonalInformation.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
@@ -14,7 +15,7 @@ jest.mock('react-portal', () => ({
 }));
 
 describe('PersonalInformation', () => {
-  it('renders a personal information component', () => {
+  it('renders a personal information component', async () => {
     const store = mockStore({
       userSession: {
         token: jwt.sign({ sub: 'john' }, 'secret'),
@@ -43,10 +44,11 @@ describe('PersonalInformation', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    await waitFor(() => {});
+    expect(component.toJSON()).toMatchSnapshot();
   });
-  it('renders a personal information component embedded in the Toolbar', () => {
+  it('renders a personal information component embedded in the Toolbar', async () => {
     const store = mockStore({
       userSession: {
         token: jwt.sign({ sub: 'john' }, 'secret'),
@@ -76,7 +78,7 @@ describe('PersonalInformation', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await waitFor(() => {});
+    expect(component.toJSON()).toMatchSnapshot();
   });
 });

src/components/manage/Widgets/FileWidget.jsx

@@ -10,7 +10,7 @@ import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
-import Dropzone from 'react-dropzone';
+import loadable from '@loadable/component';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -22,6 +22,9 @@ const imageMimetypes = [
   'image/gif',
   'image/svg+xml',
 ];
+const Dropzone = loadable(() => import('react-dropzone'), {
+  resolveComponent: (components) => components.Dropzone,
+});
 
 const messages = defineMessages({
   releaseDrag: {

src/components/manage/Widgets/FileWidget.test.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import FileWidget from './FileWidget';
 import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
-test('renders a file widget component', () => {
+test('renders a file widget component', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
@@ -19,6 +20,7 @@ test('renders a file widget component', () => {
       <FileWidget id="my-field" title="My field" onChange={() => {}} />,
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  await waitFor(() => {});
+  expect(component.toJSON()).toMatchSnapshot();
 });