refactor: migrate from react-loadable to @react-loadable/revised

[Josh-Cena]

Motivation

Continuation of #6306. Close #3841

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

TODO

[Josh-Cena]

Not sure if it even works... There are API changes between the revised version and the original version, and we have an addon that I have no idea if is impacted by this migration.

[seyoon20087]

Try modifying these lines:

docusaurus/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx

Lines 8 to 15 in 8f69f63

	import React from 'react';
	import type {LoadingComponentProps} from 'react-loadable';
	export default function Loading({
	error,
	retry,
	pastDelay,
	}: LoadingComponentProps): JSX.Element | null {

To this:

diff --git a/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx b/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
index 761c9c3a7..97cbac153 100644
--- a/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
@@ -5,14 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
 import React from 'react';
-import type {LoadingComponentProps} from 'react-loadable';
 
 export default function Loading({
-  error,
-  retry,
+  // @ts-ignore
+  error, // @ts-ignore
+  retry, // @ts-ignore
   pastDelay,
-}: LoadingComponentProps): JSX.Element | null {
+}): JSX.Element | null {
   if (error) {
     return (
       <div

This works for me, but let me know if something needs to be improved

[Josh-Cena]

@seyoon20087 Adding ts-ignore will surely make things "work" 😄 I will try to make them actually "work" or figure out if this setup will work at all

[Josh-Cena]

@react-loadable/revised looks extremely low-quality (especially with types). I guess I would just migrate to loadable-components instead.

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	044001a
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62446c81a70404000836edb6
😎 Deploy Preview	https://deploy-preview-6581--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	59
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-6581--docusaurus-2.netlify.app/

[github-actions]

Size Change: +3.79 kB (0%)

Total Size: 807 kB

Filename	Size	Change
website/build/assets/js/main.********.js	614 kB	+3.69 kB (+1%)
website/build/index.html	38.5 kB	+90 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	49.9 kB
website/build/assets/css/styles.********.css	105 kB

_{compressed-size-action}

[slorber]

@Josh-Cena do we even still need a lib with React 18?

I'd like to figure out how to remove this.

React.lazy() now has support for Server-Side-Rendering

• https://reactjs.org/docs/code-splitting.html#reactlazy
• https://17.reactjs.org/docs/code-splitting.html#reactlazy

The v17 warning + suggestion to use loadable components was removed, so I guess our setup could be simplified 🤷‍♂️

The doc is not so clear about the behavior of React.lazy() with server-side-rendering behavior though, but I guess it will not show suspense placeholders and just load appropriately the lazy components? Will try to get answers

[Josh-Cena]

React.lazy doesn't work with SSG. See https://loadable-components.com/docs/loadable-vs-react-lazy/

[slorber]

React.lazy did not work with SSG, but in React 18 it does (loadable components doc has probably not been updated since)

Confirmed by React itself :D https://twitter.com/reactjs/status/1511755578716028928