GitLab will be upgraded on June 23rd evening. During the upgrade the service will be unavailable, sorry for the inconvenience.

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

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