Merge pull request #446 from tweag/website/playground-loading-icon

Add a spinning icon when loading playground

website/src/components/header.js

@@ -1,6 +1,5 @@
 import React from "react"
 import { Link } from "gatsby"
-import PropTypes from "prop-types"
 import {StaticImage} from "gatsby-plugin-image";
 
 const Header = ({ menuLinks }) => (

website/src/components/playground-clientside.js

@@ -1,9 +1,31 @@
-import Loadable from "@loadable/component";
+import {lazy} from "@loadable/component";
+import React 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).
  * This is made necessary by the code editor, based on react-ace and ace-builds, which use `window` and don't seem to fully support SSR yet.
  * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<unknown>>}
  */
-const LoadablePlayground = Loadable(() => import("./playground/playground"));
-export default LoadablePlayground
+const LoadablePlayground = lazy(() => import("./playground/playground"));
+
+export default function ClientSidePlayground(props) {
+    const isSSR = typeof window === "undefined";
+
+    return (
+        <>
+            {!isSSR && (
+                <React.Suspense fallback={
+                    <div className={"text-center playground-loader mt-4"}>
+                        Loading playground <span className={"ml-2"}><FontAwesomeIcon icon={faSpinner} size={"lg"} spin/></span>
+                    </div>
+                }>
+                <LoadablePlayground {...props}/>
+                </React.Suspense>
+            )}
+        </>
+    );
+}

website/src/styles/global.css

@@ -12,6 +12,11 @@
     line-height: 1.3;
 }
 
+.playground-loader {
+    font-size: 1.5em;
+    line-height: 1.3;
+}
+
 .secondary-text {
     font-size: 1.3em;
     line-height: 1.2;