feature: spinner for print map loading indicator (#1891)

* feature: spinner for print map loading indicator * fix: make spinner more visible
origo-map · Nov 24, 2023 · cc45e70 · cc45e70
1 parent fb574fe
commit cc45e70
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -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 = {}) {
             </div>
           </div>
         </div>
+        ${centerComponent.render()}
         <div id="o-print-tools-left" class="top-left fixed no-print flex column spacing-vertical-small z-index-ontop-top height-full">
           ${printSettings.render()}
           ${printInteractionToggle.render()}