Lazy-load "Beautiful Drag-N-Drop" (#859)

Code-splits the module into "dnd.js", reducing the ui.js bundle size. This module is only needed when viewing lists.

## Room for improvement
`ClaimList` can probably improve further by only using the dnd components in "edit" mode.

## Implementation notes
- The modules are not default exports, so the additional chaining to `React.lazy` was required.
- Experimenting with using an Object to store the import so that a single "prettier-ignore" can be used to make it not wrap.
- The FlowFixMe came from the original code. It is unclear why it is needed to resolve the module, but Haffa mentioned it's something related to .flowconfig.

ui/component/claimList/view.jsx

@@ -1,8 +1,4 @@
 // @flow
-
-// $FlowFixMe
-import { Draggable } from 'react-beautiful-dnd';
-
 import { MAIN_CLASS } from 'constants/classnames';
 import type { Node } from 'react';
 import React, { useEffect } from 'react';
@@ -14,6 +10,11 @@ import usePersistedState from 'effects/use-persisted-state';
 import debounce from 'util/debounce';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 
+const Draggable = React.lazy(() =>
+  // $FlowFixMe
+  import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.Draggable }))
+);
+
 const DEBOUNCE_SCROLL_HANDLER_MS = 150;
 const SORT_NEW = 'new';
 const SORT_OLD = 'old';
@@ -250,6 +251,7 @@ export default function ClaimList(props: Props) {
 
           {sortedUris.map((uri, index) =>
             droppableProvided ? (
+              <React.Suspense fallback={null}>
                 <Draggable key={uri} draggableId={uri} index={index}>
                   {(draggableProvided, draggableSnapshot) => {
                     // Restrict dragging to vertical axis
@@ -275,6 +277,7 @@ export default function ClaimList(props: Props) {
                     );
                   }}
                 </Draggable>
+              </React.Suspense>
             ) : (
               getClaimPreview(uri, index)
             )

ui/component/collectionContentSidebar/view.jsx

@@ -1,8 +1,4 @@
 // @flow
-
-// $FlowFixMe
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-
 import React from 'react';
 import classnames from 'classnames';
 import ClaimList from 'component/claimList';
@@ -13,6 +9,14 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
 import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 
+// prettier-ignore
+const Lazy = {
+  // $FlowFixMe
+  DragDropContext: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.DragDropContext }))),
+  // $FlowFixMe
+  Droppable: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.Droppable }))),
+};
+
 type Props = {
   id: string,
   url: string,
@@ -105,8 +109,9 @@ export default function CollectionContent(props: Props) {
         )
       }
       body={
-        <DragDropContext onDragEnd={handleOnDragEnd}>
+        <React.Suspense fallback={null}>
-          <Droppable droppableId="list__ordering">
+          <Lazy.DragDropContext onDragEnd={handleOnDragEnd}>
+            <Lazy.Droppable droppableId="list__ordering">
               {(DroppableProvided) => (
                 <ClaimList
                   isCardBody
@@ -119,8 +124,9 @@ export default function CollectionContent(props: Props) {
                   droppableProvided={DroppableProvided}
                 />
               )}
-          </Droppable>
+            </Lazy.Droppable>
-        </DragDropContext>
+          </Lazy.DragDropContext>
+        </React.Suspense>
       }
     />
   );

ui/component/collectionEdit/view.jsx

@@ -1,8 +1,4 @@
 // @flow
-
-// $FlowFixMe
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-
 import { DOMAIN } from 'config';
 import React from 'react';
 import classnames from 'classnames';
@@ -27,6 +23,14 @@ import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import * as PAGES from 'constants/pages';
 import analytics from 'analytics';
 
+// prettier-ignore
+const Lazy = {
+  // $FlowFixMe
+  DragDropContext: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.DragDropContext }))),
+  // $FlowFixMe
+  Droppable: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.Droppable }))),
+};
+
 const LANG_NONE = 'none';
 const MAX_TAG_SELECT = 5;
 
@@ -374,8 +378,9 @@ function CollectionForm(props: Props) {
               </div>
             </TabPanel>
             <TabPanel>
-              <DragDropContext onDragEnd={handleOnDragEnd}>
+              <React.Suspense fallback={null}>
-                <Droppable droppableId="list__ordering">
+                <Lazy.DragDropContext onDragEnd={handleOnDragEnd}>
+                  <Lazy.Droppable droppableId="list__ordering">
                     {(DroppableProvided) => (
                       <ClaimList
                         uris={collectionUrls}
@@ -385,8 +390,9 @@ function CollectionForm(props: Props) {
                         droppableProvided={DroppableProvided}
                       />
                     )}
-                </Droppable>
+                  </Lazy.Droppable>
-              </DragDropContext>
+                </Lazy.DragDropContext>
+              </React.Suspense>
             </TabPanel>
             <TabPanel>
               <Card

ui/page/collection/view.jsx

@@ -1,8 +1,4 @@
 // @flow
-
-// $FlowFixMe
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-
 import React from 'react';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
@@ -20,6 +16,14 @@ import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 import Spinner from 'component/spinner';
 
+// prettier-ignore
+const Lazy = {
+  // $FlowFixMe
+  DragDropContext: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.DragDropContext }))),
+  // $FlowFixMe
+  Droppable: React.lazy(() => import('react-beautiful-dnd' /* webpackChunkName: "dnd" */).then((module) => ({ default: module.Droppable }))),
+};
+
 export const PAGE_VIEW_QUERY = 'view';
 export const EDIT_PAGE = 'edit';
 
@@ -225,9 +229,9 @@ export default function CollectionPage(props: Props) {
         {editing}
         <div className={classnames('section card-stack')}>
           {info}
-
+          <React.Suspense fallback={null}>
-          <DragDropContext onDragEnd={handleOnDragEnd}>
+            <Lazy.DragDropContext onDragEnd={handleOnDragEnd}>
-            <Droppable droppableId="list__ordering">
+              <Lazy.Droppable droppableId="list__ordering">
                 {(DroppableProvided) => (
                   <ClaimList
                     uris={collectionUrls}
@@ -237,8 +241,9 @@ export default function CollectionPage(props: Props) {
                     unavailableUris={unavailableUris}
                   />
                 )}
-            </Droppable>
+              </Lazy.Droppable>
-          </DragDropContext>
+            </Lazy.DragDropContext>
+          </React.Suspense>
         </div>
       </Page>
     );