Add suspense loaders on shipping page

src/components/Shipping/ParcelsSection.js

-import React, { useState } from 'react';
-import { Alert, Button, Glyphicon, HelpBlock, Grid } from 'react-bootstrap';
+import React, { useState, Suspense } from 'react';
+import {
+  Modal,
+  Alert,
+  Button,
+  Glyphicon,
+  HelpBlock,
+  Grid,
+} from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
 import { useHistory } from 'react-router-dom';
 import { useFetcher, useResource } from 'rest-hooks';
@@ -12,6 +19,7 @@ import ParcelTable from '../Parcels/ParcelTable';
 import styles from './ParcelSection.module.css';
 import { itemsFormatter } from '../../helpers';
 import ParcelCondensedView from '../Parcels/ParcelCondensedView';
+import Loader from '../Loader';
 
 function getColumns(investigation) {
   return [
@@ -202,14 +210,22 @@ function ParcelsSection(props) {
   return (
     <Grid style={{ marginLeft: 0 }} fluid>
       {(isCreating || editingId) && (
-        <ParcelFormModal
-          investigation={investigation}
-          shipment={shipment}
-          parcel={parcel}
-          investigationUrl={investigationUrl}
-          onSubmitAsync={handleSubmit}
-          onCloseModal={handleCloseModal}
-        />
+        <Suspense
+          fallback={
+            <Modal show>
+              <Loader message="Loading form..." spacedOut />
+            </Modal>
+          }
+        >
+          <ParcelFormModal
+            investigation={investigation}
+            shipment={shipment}
+            parcel={parcel}
+            investigationUrl={investigationUrl}
+            onSubmitAsync={handleSubmit}
+            onCloseModal={handleCloseModal}
+          />
+        </Suspense>
       )}
       <div className="actions-heading">
         <div className={styles.heading}>

src/components/Shipping/ShippingPanel.js

-import React from 'react';
+import React, { Suspense } from 'react';
 import { useCache, useResource } from 'rest-hooks';
 import AddressResource from '../../resources/address';
 import ShipmentResource from '../../resources/shipment';
 import { useReturnAddress } from '../Address/utils';
 import ParcelsSection from './ParcelsSection';
 import ShipmentSection from './ShipmentSection';
+import Loader from '../Loader';
 
 function ShippingPanel(props) {
   const { investigation } = props;
@@ -26,12 +27,14 @@ function ShippingPanel(props) {
         defaultReturnAddress={defaultReturnAddress}
       />
       {shipment && (
-        <ParcelsSection
-          investigation={investigation}
-          shipment={shipment}
-          defaultShippingAddress={defaultShippingAddress}
-          defaultReturnAddress={defaultReturnAddress}
-        />
+        <Suspense fallback={<Loader message="Loading parcels..." spacedOut />}>
+          <ParcelsSection
+            investigation={investigation}
+            shipment={shipment}
+            defaultShippingAddress={defaultShippingAddress}
+            defaultReturnAddress={defaultReturnAddress}
+          />
+        </Suspense>
       )}
     </>
   );