Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
ICAT
Datahub
Commits
038ee993
Commit
038ee993
authored
Aug 26, 2020
by
Axel Bocciarelli
Browse files
Add suspense loaders on shipping page
parent
bde014d4
Pipeline
#31928
passed with stage
in 3 minutes and 14 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/Shipping/ParcelsSection.js
View file @
038ee993
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
View file @
038ee993
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
>
)}
<
/
>
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment