diff --git a/src/components/detail-page/download-image.tsx b/src/components/detail-page/download-image.tsx index a4b5ee4f..9ac3e0cf 100644 --- a/src/components/detail-page/download-image.tsx +++ b/src/components/detail-page/download-image.tsx @@ -1,5 +1,5 @@ import { Trans } from "@lingui/macro"; -import { Link as MUILink } from "@mui/material"; +import { Box, Link as MUILink, Typography } from "@mui/material"; import html2canvas from "html2canvas"; import * as React from "react"; @@ -16,6 +16,10 @@ const getImageDataFromElement = async (elementId: string): Promise => { return canvas.toDataURL("image/png"); }; +// helper to wait a frame +const nextFrame = () => + new Promise((resolve) => requestAnimationFrame(resolve)); + /** * Used to download an image of a specific element or from an element * that directly defines a way to get the image data. @@ -32,30 +36,51 @@ export const DownloadImage = ({ elementId?: string; getImageData?: () => Promise; }) => { + const [downloading, setDownloading] = React.useState(false); const onDownload: React.MouseEventHandler = async (ev) => { ev.preventDefault(); - const imageData = elementId - ? await getImageDataFromElement(elementId) - : await getImageData!(); + setDownloading(true); + try { + await nextFrame(); + const imageData = elementId + ? await getImageDataFromElement(elementId) + : await getImageData!(); - if (!imageData) { - return; + if (!imageData) { + return; + } + const a = document.createElement("a"); + a.href = imageData; + a.download = fileName; + a.click(); + } finally { + setDownloading(false); } - const a = document.createElement("a"); - a.href = imageData; - a.download = fileName; - a.click(); }; return ( - - Bild herunterladen - + + {downloading ? null : ( + + Bild herunterladen + + )} + {/* This text is shown only when the image is downloading, this is done through + a global class on body */} + {downloading ? ( + + + Eidgenössische Elektrizitätskommission ElCom + {" "} + -Tarifvergleich in Rp./kWh + + ) : null} + ); };