Disable hydrating server styles component

.changeset/quiet-phones-stare.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': patch
+---
+
+Fix flash of unstyled content

packages/docusaurus-theme-redoc/package.json

@@ -36,6 +36,7 @@
     "copyfiles": "^2.4.1",
     "lodash": "^4.17.21",
     "mobx": "^6.5.0",
+    "react-hydration-on-demand": "^2.1.0",
     "redoc": "2.0.0-rc.72",
     "styled-components": "^5.3.5"
   },

packages/docusaurus-theme-redoc/src/theme/Redoc/ServerStyles.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import '../../global';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import withHydrationOnDemand from 'react-hydration-on-demand';
 import { AppStore, Redoc, RedocRawOptions } from 'redoc';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { renderToString } from 'react-dom/server';
@@ -53,7 +54,7 @@ const prefixCssSelectors = function (rules: string, className: string) {
 const LIGHT_MODE_PREFIX = "html:not([data-theme='dark'])";
 const DARK_MODE_PREFIX = "html([data-theme='dark'])";
 
-export function ServerStyles({
+function ServerStylesComponent({
   specProps,
   lightThemeOptions,
   darkThemeOptions,
@@ -102,3 +103,5 @@ export function ServerStyles({
     </div>
   );
 }
+
+export const ServerStyles = withHydrationOnDemand()(ServerStylesComponent);

packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
+import withHydrationOnDemand from 'react-hydration-on-demand';
 import '../../global';
 import type { RedocRawOptions } from 'redoc';
 
 /**
  * Don't hydrate/replace server styles
  * @see https://github.com/facebook/react/issues/10923#issuecomment-338715787
  */
-export function ServerStyles(_props: {
+function ServerStylesComponent(_props: {
   specProps: SpecProps;
   lightThemeOptions: RedocRawOptions;
   darkThemeOptions: RedocRawOptions;
 }) {
   return <div className="redocusaurus-styles"></div>;
 }
+
+export const ServerStyles = withHydrationOnDemand()(ServerStylesComponent);

packages/docusaurus-theme-redoc/src/types/compat.d.ts

@@ -0,0 +1 @@
+declare module 'react-hydration-on-demand';

packages/redocusaurus/Readme.md

@@ -9,9 +9,9 @@
 1. Install redocusaurus:
 
   ```sh
-  npm i --save redocusaurus
+  npm i --save redocusaurus babel-plugin-styled-components@^2
   # OR
-  yarn add redocusaurus
+  yarn add redocusaurus babel-plugin-styled-components@^2
   ```
 
 1. Add it as a preset to your docusaurus config along with [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) and pass options:
@@ -82,6 +82,15 @@
     };
     ```
 
+2. Add `babel-plugin-styled-components` to the plugins array of your `babel.config.js`:
+
+    ```babel.config.js
+    module.exports = {
+      presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+      plugins: ['babel-plugin-styled-components']
+    };
+    ```
+
 The API Doc will be available at the route specified (`/api/` in the example above). To customize it see [full plugin options](https://redocusaurus.vercel.app/docs/getting-started/plugin-options).
 
 ### Options

website/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  plugins: ['babel-plugin-styled-components']
 };

website/docs/getting-started/Installation.md

@@ -12,7 +12,7 @@ author_url: https://rohit.page
 ```sh
 npm i --save redocusaurus
 # OR
-yarn add redocusaurus
+yarn add redocusaurus babel-plugin-styled-components@^2
 ```
 
 1. Add it as a preset to your docusaurus config along with [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) and pass options:
@@ -83,6 +83,15 @@ yarn add redocusaurus
      };
      ```
 
+2. Add `babel-plugin-styled-components` to the plugins array of your `babel.config.js`:
+
+    ```babel.config.js
+    module.exports = {
+      presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+      plugins: ['babel-plugin-styled-components']
+    };
+    ```
+
 The API Doc will be available at the path specific by `route`. To skip adding a
 route altogether just don't set the `route` property. You will still be
 able to reference schema elements manually using [Schema Imports](/docs/guides/schema-imports) or create Custom React Pages using the data and theme components.

website/package.json

@@ -31,7 +31,8 @@
   },
   "devDependencies": {
     "@percy/cli": "^1.3.0",
-    "@types/react": "^17.0.45"
+    "@types/react": "^17.0.45",
+    "babel-plugin-styled-components": "^2.0.7"
   },
   "browserslist": {
     "production": [