Add CSSLoadingWarningMessage to App in client

facebook · Oct 22, 2020 · 4dead0f · 4dead0f
1 parent 7f6fba9
commit 4dead0f
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
@@ -17,6 +17,35 @@ import PendingNavigation from './PendingNavigation';
 
 import './client-lifecycles-dispatcher';
 
+function isAnyCSSLoaded() {
+  const stylesheets = document.styleSheets;
+  for (let i = 0; i < stylesheets.length; i += 1) {
+    try {
+      if (
+        stylesheets[i].cssRules != null &&
+        stylesheets[i].cssRules.length >= 0
+      ) {
+        return true;
+      }
+    } catch (e) {}
+  }
+  return false;
+}
+
+function CSSLoadingWarningMessage({isClient}) {
+  if (isClient && (typeof window === 'undefined' || !isAnyCSSLoaded())) {
+    return (
+      <div style={{border: 'solid red thick', padding: '16px'}}>
+        <span>
+          You site CSS did not load properly. Your baseUrl setting is probably
+          bad.
+        </span>
+      </div>
+    );
+  }
+  return null;
+}
+
 function App(): JSX.Element {
   const [isClient, setIsClient] = useState(false);
 
@@ -27,6 +56,7 @@ function App(): JSX.Element {
   return (
     <DocusaurusContext.Provider
       value={{siteConfig, siteMetadata, globalData, isClient}}>
+      <CSSLoadingWarningMessage isClient />
       <PendingNavigation routes={routes}>
         {renderRoutes(routes)}
       </PendingNavigation>