Add spinning animation while exporting the pdf

UI/Base/Minimap.ts

@@ -24,6 +24,7 @@ export default class Minimap extends BaseUIElement {
                     location?: UIEventSource<Loc>,
                     allowMoving?: boolean,
                     leafletOptions?: any,
+                    
                     onFullyLoaded?: (leaflet: L.Map) => void
                 }
     ) {

UI/BigComponents/AllDownloads.ts

@@ -9,6 +9,9 @@ import {DownloadPanel} from "./DownloadPanel";
 import {SubtleButton} from "../Base/SubtleButton";
 import Svg from "../../Svg";
 import ExportPDF from "../ExportPDF";
+import {Browser} from "leaflet";
+import ie = Browser.ie;
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 export default class AllDownloads extends ScrollableFullScreen {
 
@@ -23,7 +26,9 @@ export default class AllDownloads extends ScrollableFullScreen {
     }
 
     private static GeneratePanel(): BaseUIElement {
+        const isExporting = new UIEventSource(false, "Pdf-is-exporting")
         const generatePdf = () => {
+            isExporting.setData(true)
             new ExportPDF(
                 {
                     freeDivId: "belowmap",
@@ -31,21 +36,34 @@ export default class AllDownloads extends ScrollableFullScreen {
                     location: State.state.locationControl,
                     features: State.state.featurePipeline.features,
                     layout: State.state.layoutToUse,
-                })
+                }).isRunning.addCallbackAndRun(isRunning => isExporting.setData(isRunning))
         }
 
+        const loading = Svg.loading_svg().SetClass("animate-rotate");
+
+        const icon = new Toggle(loading, Svg.floppy_ui(), isExporting);
+        const text = new Toggle(
+            new FixedUiElement("Exporting..."),
+
+            new Combine([
+                Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),
+                Translations.t.general.download.downloadAsPdfHelper.Clone()]
+            ).SetClass("flex flex-col")
+                .onClick(() => {
+                    generatePdf()
+                }),
+            isExporting);
+
         const pdf = new Toggle(
-            new SubtleButton(Svg.floppy_ui(),
+            new SubtleButton(
-                new Combine([Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),
+                icon,
-                    Translations.t.general.download.downloadAsPdfHelper.Clone()]
+                text),
-                    ).SetClass("flex flex-col"))
-                .onClick(generatePdf),
             undefined,
 
             State.state.featureSwitchExportAsPdf
         )
 
-       const exportPanel = new Toggle(
+        const exportPanel = new Toggle(
             new DownloadPanel(),
             undefined,
             State.state.featureSwitchEnableExport

UI/ExportPDF.ts

@@ -33,6 +33,9 @@ export default class ExportPDF {
     private readonly _layout: UIEventSource<LayoutConfig>;
     private _screenhotTaken = false;
 
+    public isRunning = new UIEventSource(true)
+    public loadedTiles = new UIEventSource(0)
+
     constructor(
         options: {
             freeDivId: string,
@@ -60,6 +63,8 @@ export default class ExportPDF {
             location: new UIEventSource<Loc>(loc), // We remove the link between the old and the new UI-event source as moving the map while the export is running fucks up the screenshot
             background: options.background,
             allowMoving: false,
+            
+            
             onFullyLoaded: leaflet => window.setTimeout(() => {
                 if (self._screenhotTaken) {
                     return;
@@ -137,7 +142,7 @@ export default class ExportPDF {
         doc.text(t.generatedWith.txt, 40, 23, {
             maxWidth: 125
         })
-        const backgroundLayer : BaseLayer = State.state.backgroundLayer.data
+        const backgroundLayer: BaseLayer = State.state.backgroundLayer.data
         const attribution = new FixedUiElement(backgroundLayer.layer().getAttribution() ?? backgroundLayer.name).ConstructElement().innerText
         doc.textWithLink(t.attr.txt, 40, 26.5, {
             maxWidth: 125,
@@ -148,8 +153,8 @@ export default class ExportPDF {
             background: attribution
         }).txt, 40, 30)
 
-        let date = new Date().toISOString().substr(0,16)
+        let date = new Date().toISOString().substr(0, 16)
-        
+
         doc.setFontSize(7)
         doc.text(t.versionInfo.Subs({
             version: Constants.vNumber,
@@ -157,7 +162,7 @@ export default class ExportPDF {
         }).txt, 40, 34, {
             maxWidth: 125
         })
-        
+
         // Add the logo of the layout
         let img = document.createElement('img');
         const imgSource = layout.icon
@@ -188,6 +193,6 @@ export default class ExportPDF {
 
         doc.save(`MapComplete_${layout.title.txt}_${date}.pdf`);
 
-
+        this.isRunning.setData(false)
     }
 }

assets/svg/loading.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+   fill="none"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="loading.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1003"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="13.906433"
+     inkscape:cx="14.114788"
+     inkscape:cy="9.6469257"
+     inkscape:window-x="1024"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <circle
+     class="opacity-25"
+     cx="12"
+     cy="12"
+     r="10"
+     id="circle2"
+     stroke-width="4"
+     stroke="currentColor"
+     style="stroke:#000000;stroke-opacity:0.33976835" />
+  <path
+     class="opacity-75"
+     fill="currentColor"
+     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+     id="path4" />
+</svg>

index.css

@@ -331,20 +331,7 @@ li::marker {
     width: 40em;
     max-height: calc(100vh - 15em);
     overflow-y: auto;
-    border-top-right-radius: 1em;
+    border-radius: 1em;
-    border-bottom-right-radius: 1em;
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-}
-
-
-#messagesbox {
-    /*Only shown on big screens*/
-    position: relative;
-    padding: 0;
-    pointer-events: all;
-    box-shadow: 0 0 10px var(--shadow-color);
-    width: min-content;
     background-color: var(--background-color);
     color: var(--foreground-color);
 }