diff --git a/scss/_print.scss b/scss/_print.scss index 5e759a1b7..2656e7154 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -116,6 +116,16 @@ $print-scale-line-font-size: $font-size-smallest; display: block; } +.print-map-loading-spinner { + display: inline-block; + width: 45px; + height: 45px; + border: 16px solid rgba(255, 255, 255, 0.884); + border-radius: 50%; + border-top-color: #008ff5; + animation: spin 1s ease-in-out infinite; + } + // media print settings @media print { .no-print { diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js index ae6940e31..c4d256f1c 100644 --- a/src/controls/print/print-component.js +++ b/src/controls/print/print-component.js @@ -7,7 +7,7 @@ import TileWMSSource from 'ol/source/TileWMS'; import TileGrid from 'ol/tilegrid/TileGrid'; import { Group } from 'ol/layer'; import { - Button, Component, cuid, dom + Button, Component, cuid, dom, Element as El } from '../../ui'; import pageTemplate from './page.template'; import PrintMap from './print-map'; @@ -253,6 +253,10 @@ const PrintComponent = function PrintComponent(options = {}) { const printMapComponent = PrintMap({ logo, northArrow, map, viewer, showNorthArrow, printLegend, showPrintLegend }); + const centerComponent = El({ cls: 'flex column align-start absolute center-center transparent z-index-ontop-middle' }); + const printMapSpinner = El({ cls: 'print-map-loading-spinner' }); + centerComponent.addComponent(printMapSpinner); + const closeButton = Button({ cls: 'fixed top-right medium round icon-smaller light box-shadow z-index-ontop-high', icon: '#ic_close_24px', @@ -339,10 +343,12 @@ const PrintComponent = function PrintComponent(options = {}) { function disablePrintToolbar() { printToolbar.setDisabled(true); + document.querySelector(`#${printMapSpinner.getId()}`).style.display = ''; } function enablePrintToolbar() { printToolbar.setDisabled(false); + document.querySelector(`#${printMapSpinner.getId()}`).style.display = 'none'; } function updateScaleOnMove() { @@ -698,6 +704,7 @@ const PrintComponent = function PrintComponent(options = {}) { + ${centerComponent.render()}
${printSettings.render()} ${printInteractionToggle.render()}