From f5d37b2a8880a9dec6748233e15d0a5df736729e Mon Sep 17 00:00:00 2001 From: Nicklas Utgaard Date: Fri, 22 Jan 2021 13:13:08 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20forbedring=20av=20async?= =?UTF-8?q?=20lasting=20av=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit skriver om til promise-map for å holde styr hvilke apper man har startet å laste inn. Dette gjøres fordi `loadjs.isDefined`/`loadjs.ready`-oppsettet ikke fungerte optimalt og man kunne komme i situasjoner hvor man prøvde å rendre appen mens preloading fortsatt pågikk. `loadjs.isDefined`-guarden indikerte da at appen var lastet inn siden det skjer synkront med kallet til loadjs, mens den i realiteten ikke var klar enda. Ved bruk av ett promise-map så erstatter vi `loadjs.isDefined`-guarden med vår egen logikk, som returnerer eksisterene promise (e.g pågående eller ferdig innlasting) ved påfølgende forsøk på å laste inn en app. Dette gir oss også deduping av henting av assets og innlasting av ressurser som en side-effekt, men introduserer en global variabel. --- src/async/async-navspa.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/async/async-navspa.tsx b/src/async/async-navspa.tsx index ac59b55..d40a529 100644 --- a/src/async/async-navspa.tsx +++ b/src/async/async-navspa.tsx @@ -30,19 +30,20 @@ function fetchAssetUrls(appBaseUrl: string, assetManifestParser: AssetManifestPa .then(manifest => assetManifestParser(manifest)); } -async function loadAssets(config: PreloadConfig): Promise { +const loadingStatus: { [key: string]: Promise } = {}; +function loadAssets(config: PreloadConfig): Promise { const loadJsBundleId = createLoadJsBundleId(config.appName); - const assetManifestParser = config.assetManifestParser || createAssetManifestParser(config.appBaseUrl); - - if (!loadjs.isDefined(loadJsBundleId)) { + if (!loadingStatus[loadJsBundleId]) { if (process.env.NODE_ENV === 'development' && (scope[config.appName] || scopeV2[config.appName])) { console.warn(asyncLoadingOfDefinedApp(config.appName)) } - const assets: string[] = await fetchAssetUrls(config.appBaseUrl, assetManifestParser) - if (!loadjs.isDefined(loadJsBundleId)) { - await loadjs(assets, loadJsBundleId, {returnPromise: true}) - } + + const assetManifestParser = config.assetManifestParser || createAssetManifestParser(config.appBaseUrl); + loadingStatus[loadJsBundleId] = fetchAssetUrls(config.appBaseUrl, assetManifestParser) + .then((assets) => loadjs(assets, loadJsBundleId, {returnPromise: true})) } + + return loadingStatus[loadJsBundleId]; } export function preload(config: PreloadConfig) {