feat(techdocs): added onCssReady transformer

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
 

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;
 

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);
+        }
+      }),
+    );
+  };
+};