2020-11-24 15:15:51 +05:30
|
|
|
const CSS_LOADED_EVENT = 'CSSLoaded';
|
|
|
|
const STARTUP_LINK_LOADED_EVENT = 'CSSStartupLinkLoaded';
|
|
|
|
|
|
|
|
const getAllStartupLinks = (() => {
|
|
|
|
let links = null;
|
|
|
|
return () => {
|
|
|
|
if (!links) {
|
|
|
|
links = Array.from(document.querySelectorAll('link[data-startupcss]'));
|
|
|
|
}
|
|
|
|
return links;
|
|
|
|
};
|
|
|
|
})();
|
|
|
|
const isStartupLinkLoaded = ({ dataset }) => dataset.startupcss === 'loaded';
|
|
|
|
const allLinksLoaded = () => getAllStartupLinks().every(isStartupLinkLoaded);
|
|
|
|
|
|
|
|
const handleStartupEvents = () => {
|
|
|
|
if (allLinksLoaded()) {
|
|
|
|
document.dispatchEvent(new CustomEvent(CSS_LOADED_EVENT));
|
|
|
|
document.removeEventListener(STARTUP_LINK_LOADED_EVENT, handleStartupEvents);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-01-29 00:20:46 +05:30
|
|
|
/* For `waitForCSSLoaded` methods, see docs.gitlab.com/ee/development/fe_guide/performance.html#important-considerations */
|
2020-11-24 15:15:51 +05:30
|
|
|
export const waitForCSSLoaded = (action = () => {}) => {
|
2021-01-29 00:20:46 +05:30
|
|
|
if (!gon?.features?.startupCss || allLinksLoaded()) {
|
2020-11-24 15:15:51 +05:30
|
|
|
return new Promise(resolve => {
|
|
|
|
action();
|
|
|
|
resolve();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
document.addEventListener(CSS_LOADED_EVENT, resolve, { once: true });
|
|
|
|
document.addEventListener(STARTUP_LINK_LOADED_EVENT, handleStartupEvents);
|
|
|
|
}).then(action);
|
|
|
|
};
|