diff --git a/src/setupTests.ts b/src/setupTests.ts index 771e5f488a..23a73fdda5 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -20,6 +20,10 @@ Object.defineProperty(window, 'matchMedia', { })), }); +Object.defineProperty(document, 'fonts', { + value: { ready: Promise.resolve({}) }, +}); + // org and app is assigned to window object, so to avoid 'undefined' in tests, they need to be set const altinnWindow = window as Window as IAltinnWindow; altinnWindow.org = 'ttd'; diff --git a/src/shared/components/ReadyForPrint.tsx b/src/shared/components/ReadyForPrint.tsx index 43433e7962..c596fe7ab9 100644 --- a/src/shared/components/ReadyForPrint.tsx +++ b/src/shared/components/ReadyForPrint.tsx @@ -6,11 +6,13 @@ import React from 'react'; * loading indicators to the user while waiting for content to get ready. */ export function ReadyForPrint() { - const [imagesLoaded, setImagesLoaded] = React.useState(false); + const [assetsLoaded, setAssetsLoaded] = React.useState(false); React.useLayoutEffect(() => { const promises: Promise[] = []; + promises.push(document.fonts.ready); + const imageLoadPromise = (img: HTMLImageElement) => { return new Promise((res) => { img.addEventListener('load', res); @@ -29,13 +31,13 @@ export function ReadyForPrint() { // element after all images have been rendered. requestAnimationFrame(() => { requestAnimationFrame(() => { - setImagesLoaded(true); + setAssetsLoaded(true); }); }); }); }, []); - if (!imagesLoaded) { + if (!assetsLoaded) { return null; }