Fix fallback

Janpot · Janpot · commit 0442bbd4b12f · 2021-12-20T17:12:14.000+01:00
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -42,10 +42,12 @@ function dynamicWithFallbackProps(getter, options = {}) {
   };
 }
 
-const EditableDemoEditor = dynamicWithFallbackProps(() => load('EditableDemoEditor'), {
-  loading: ({ props }) => {
-    return props.fallback;
-  },
+const EditableDemoPreview = dynamicWithFallbackProps(() => load('EditableDemoPreview'), {
+  loading: ({ props }) => props.fallback,
+});
+
+const EditableDemoEditor = dynamicWithFallbackProps(async () => load('EditableDemoEditor'), {
+  loading: ({ props }) => props.fallback,
 });
 
 const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
@@ -207,7 +209,6 @@ export default function Demo(props) {
     setDemoHovered(event.type === 'mouseenter');
   };
 
-  const DemoComponent = demoData.Component;
   const demoName = getDemoName(demoData.githubLocation);
   const demoSandboxedStyle = React.useMemo(
     () => ({
@@ -272,15 +273,20 @@ export default function Demo(props) {
     handleEditorChange(codeOpen ? demoData.raw : demo.jsxPreview);
   }, [codeOpen, handleEditorChange, demoData.raw, demo.jsxPreview]);
 
-  const codeSandboxed = (
-    <DemoSandboxed
-      key={demoKey}
-      style={demoSandboxedStyle}
-      component={DemoComponent}
-      iframe={demoOptions.iframe}
-      name={demoName}
-      onResetDemoClick={resetDemo}
-    />
+  const DemoComponent = React.useMemo(
+    () =>
+      isEditing
+        ? () => (
+            <EditableDemoPreview
+              resolveDemoImports={resolveDemoImports}
+              code={dynamicCode}
+              key={demoKey}
+              language={demoData.sourceLanguage}
+              fallback={<demoData.Component />}
+            />
+          )
+        : demoData.Component,
+    [isEditing, dynamicCode, demoKey, resolveDemoImports, demoData],
   );
 
   const staticPreview = (
@@ -303,28 +309,14 @@ export default function Demo(props) {
         onMouseLeave={handleDemoHover}
       >
         <InitialFocus aria-label={t('initialFocusLabel')} action={initialFocusRef} tabIndex={-1} />
-        {
-          // <EditableDemoPreview
-          //   resolveDemoImports={resolveDemoImports}
-          //   code={dynamicCode}
-          //   key={demoKey}
-          //   language={demoData.sourceLanguage}
-          //   fallback={codeSandboxed}
-          // />
-          <DemoSandboxed
-            key={demoKey}
-            style={demoSandboxedStyle}
-            component={DemoComponent}
-            iframe={demoOptions.iframe}
-            name={demoName}
-            onResetDemoClick={resetDemo}
-            isEditing={isEditing}
-            resolveDemoImports={resolveDemoImports}
-            key={demoKey}
-            language={demoData.sourceLanguage}
-            dynamicCode={dynamicCode}
-          />
-        }
+        <DemoSandboxed
+          key={demoKey}
+          style={demoSandboxedStyle}
+          component={DemoComponent}
+          iframe={demoOptions.iframe}
+          name={demoName}
+          onResetDemoClick={resetDemo}
+        />
       </DemoRoot>
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
