diff --git a/static/app/bootstrap/processInitQueue.tsx b/static/app/bootstrap/processInitQueue.tsx index f955d2737bf9b6..803fc3563eae13 100644 --- a/static/app/bootstrap/processInitQueue.tsx +++ b/static/app/bootstrap/processInitQueue.tsx @@ -1,12 +1,12 @@ import {renderDom} from './renderDom'; import {renderOnDomReady} from './renderOnDomReady'; -const COMPONENT_MAP = new Map([ - ['Indicators', () => import('app/components/indicators')], - ['SystemAlerts', () => import('app/views/app/systemAlerts')], - ['SetupWizard', () => import('app/views/setupWizard')], - ['U2fSign', () => import('app/components/u2f/u2fsign')], -]); +const COMPONENT_MAP = { + Indicators: () => import('app/components/indicators'), + SystemAlerts: () => import('app/views/app/systemAlerts'), + SetupWizard: () => import('app/views/setupWizard'), + U2fSign: () => import('app/components/u2f/u2fsign'), +}; /** * This allows server templates to push "tasks" to be run after application has initialized. @@ -17,41 +17,43 @@ export async function processInitQueue() { return; } - await Promise.all( - /** - * Be careful here as we can not guarantee type safety on `__onSentryInit` as - * these will be defined in server rendered templates - */ - window.__onSentryInit.map(async initConfig => { - if (initConfig.name === 'passwordStrength') { - const {input, element} = initConfig; - if (!input || !element) { - return; - } - - // The password strength component is very heavyweight as it includes the - // zxcvbn, a relatively byte-heavy password strength estimation library. Load - // it on demand. - const passwordStrength = await import('app/components/passwordStrength'); - - passwordStrength.attachTo({ - input: document.querySelector(input), - element: document.querySelector(element), - }); - + /** + * Be careful here as we can not guarantee type safety on `__onSentryInit` as + * these will be defined in server rendered templates + */ + const promises = window.__onSentryInit.map(async initConfig => { + if (initConfig.name === 'passwordStrength') { + const {input, element} = initConfig; + if (!input || !element) { return; } - if (initConfig.name === 'renderReact') { - if (!COMPONENT_MAP.has(initConfig.component)) { - return; - } - const {default: Component} = await COMPONENT_MAP.get(initConfig.component)(); + // The password strength component is very heavyweight as it includes the + // zxcvbn, a relatively byte-heavy password strength estimation library. Load + // it on demand. + const passwordStrength = await import('app/components/passwordStrength'); + + passwordStrength.attachTo({ + input: document.querySelector(input), + element: document.querySelector(element), + }); + + return; + } - renderOnDomReady(() => - renderDom(Component, initConfig.container, initConfig.props) - ); + if (initConfig.name === 'renderReact') { + if (!COMPONENT_MAP.hasOwnProperty(initConfig.component)) { + return; } - }) - ); + const {default: Component} = await COMPONENT_MAP[initConfig.component](); + + renderOnDomReady(() => + renderDom(Component, initConfig.container, initConfig.props) + ); + } + }); + + // These are all side-effects, so no need to return a value, but allow consumer to + // wait for all initialization to finish + await Promise.all(promises); }