Added sequential load for CSS

- Loading CSS from external source might take time which can result in
content appearing for a split-second without any formatting. To avoid
this, we added a CSS class that hides all content until the CSS is
properly loaded.

apps/comments-ui/src/components/CommentsBox.js

@@ -50,7 +50,7 @@ const CommentsBox = (props) => {
     };
 
     return (
-        <section className={containerClass} style={style}>
+        <section className={'ghost-display' + containerClass} style={style}>
             <Pagination />
             <div className={!pagination ? 'mt-4' : ''}>
                 {commentsElements}

apps/comments-ui/src/components/ShadowRoot.js

@@ -7,8 +7,18 @@ const ShadowRoot = ({
     ...props
 }) => {
     const cssLink = getBundledCssLink({appVersion: props.appVersion});
+
+    const styles = `
+        .ghost-display {
+            display: none;
+        }
+    `;
+
     const head = (
-        <link rel="stylesheet" href={cssLink} />
+        <>
+            <link rel="stylesheet" href={cssLink} />
+            <style dangerouslySetInnerHTML={{__html: styles}} />
+        </>
     );
 
     return (

apps/comments-ui/src/index.css

@@ -53,4 +53,8 @@ body {
 
 [contenteditable]:focus {
     outline: 0px solid transparent;
+}
+
+.ghost-display {
+    display: block !important;
 }