Commit 038ee993 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Add suspense loaders on shipping page

parent bde014d4
Pipeline #31928 passed with stage
in 3 minutes and 14 seconds
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}>
......
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>
)}
</>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment