Add a spinning icon when loading playground
import Loadable from "@loadable/component";
+import React, { Suspense } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+ faSpinner,
+} from '@fortawesome/free-solid-svg-icons';
/**
* Wrapper around the Playground component to use it on the client side only (and not via server-side rendering).
@@ -6,4 +11,13 @@ import Loadable from "@loadable/component";
* @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<unknown>>}
*/
const LoadablePlayground = Loadable(() => import("./playground/playground"));
-export default LoadablePlayground
\ No newline at end of file
+
+export default function ClientSidePlayground(props) {
+ return (
+ <React.Suspense fallback={<FontAwesomeIcon icon={faSpinner} spin/>}>
+ <div>
+ <LoadablePlayground {...props}/>
+ </div>
+ </React.Suspense>
+ );
+}
