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 Combine([Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),
-                    Translations.t.general.download.downloadAsPdfHelper.Clone()]
-                    ).SetClass("flex flex-col"))
-                .onClick(generatePdf),
+            new SubtleButton(
+                icon,
+                text),
             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)
     }
 }