diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 42be2732d0..3e840aacbc 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -27,6 +27,7 @@ import transformer, { addLinkClickListener, removeMkdocsHeader, modifyCss, + onCssReady, } from '../transformers'; import { docStorageURL } from '../../config'; import URLFormatter from '../urlFormatter'; @@ -133,6 +134,15 @@ export const Reader = () => { shadowRoot?.querySelector(parsedUrl.hash)?.scrollIntoView(); }, }), + onCssReady({ + docStorageURL, + onLoad: dom => { + dom.style.setProperty('opacity', '0'); + }, + onReady: dom => { + dom.style.removeProperty('opacity'); + }, + }), ]); }, [componentId, path, shadowRoot, state]); // eslint-disable-line react-hooks/exhaustive-deps diff --git a/plugins/techdocs/src/reader/transformers/index.ts b/plugins/techdocs/src/reader/transformers/index.ts index f35d6aa478..4e12dcae48 100644 --- a/plugins/techdocs/src/reader/transformers/index.ts +++ b/plugins/techdocs/src/reader/transformers/index.ts @@ -19,6 +19,7 @@ export * from './rewriteDocLinks'; export * from './addLinkClickListener'; export * from './removeMkdocsHeader'; export * from './modifyCss'; +export * from './onCssReady'; export type Transformer = (dom: Element) => Element; diff --git a/plugins/techdocs/src/reader/transformers/onCssReady.ts b/plugins/techdocs/src/reader/transformers/onCssReady.ts new file mode 100644 index 0000000000..af3db29b7d --- /dev/null +++ b/plugins/techdocs/src/reader/transformers/onCssReady.ts @@ -0,0 +1,49 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Transformer } from './index'; + +type OnCssReadyOptions = { + docStorageURL: string; + onCssLoading: (dom: Element) => void; + onCssReady: (dom: Element) => void; +}; + +export const onCssReady = ({ + docStorageURL, + onLoad, + onReady, +}: OnCssReadyOptions): Transformer => { + return dom => { + const cssPages = Array.from( + dom.querySelectorAll('head > link[rel="stylesheet"]'), + ).filter(elem => elem.getAttribute('href').startsWith(docStorageURL)); + + let count = cssPages.length; + + onLoad(dom); + + cssPages.forEach(cssPage => + cssPage.addEventListener('load', () => { + count -= 1; + + if (count === 0) { + onReady(dom); + } + }), + ); + }; +};