fix dynamic loading

src/containers/Editor/Panes.tsx

@@ -0,0 +1,28 @@
+import { Allotment } from "allotment";
+import React from "react";
+import { useConfig } from "src/hocs/config";
+import { LiveEditor } from "src/containers/LiveEditor";
+import { JsonEditor } from "src/containers/JsonEditor";
+import { StyledEditor } from "./styles";
+
+const Panes: React.FC = () => {
+  const { settings } = useConfig();
+
+  return (
+    <StyledEditor>
+      <Allotment.Pane
+        preferredSize={400}
+        minSize={300}
+        maxSize={600}
+        visible={!settings.hideEditor}
+      >
+        <JsonEditor />
+      </Allotment.Pane>
+      <Allotment.Pane>
+        <LiveEditor />
+      </Allotment.Pane>
+    </StyledEditor>
+  );
+};
+
+export default Panes;

src/containers/Editor/index.tsx

@@ -1,36 +1,19 @@
 import React from "react";
-import dynamic from "next/dynamic";
 import { Sidebar } from "src/components/Sidebar";
-import { JsonEditor } from "src/containers/JsonEditor";
 import { Incompatible } from "src/containers/Incompatible";
 import * as Styles from "src/containers/Editor/styles";
-import { useConfig } from "src/hocs/config";
-import { Allotment } from "allotment";
+import dynamic from "next/dynamic";
 
-const LiveEditor = dynamic(() => import("src/containers/LiveEditor"), {
+const Panes = dynamic(() => import("./Panes"), {
   ssr: false,
 });
 
 const Editor: React.FC = () => {
-  const { settings } = useConfig();
-
   return (
     <Styles.StyledPageWrapper>
       <Sidebar />
       <Styles.StyledEditorWrapper>
-        <Styles.StyledEditor>
-          <Allotment.Pane
-            preferredSize={400}
-            minSize={300}
-            maxSize={600}
-            visible={!settings.hideEditor}
-          >
-            <JsonEditor />
-          </Allotment.Pane>
-          <Allotment.Pane>
-            <LiveEditor />
-          </Allotment.Pane>
-        </Styles.StyledEditor>
+        <Panes />
       </Styles.StyledEditorWrapper>
       <Incompatible />
     </Styles.StyledPageWrapper>

src/containers/JsonEditor/index.tsx

@@ -30,7 +30,7 @@ const StyledWrapper = styled.div`
   display: grid;
   height: calc(100vh - 36px);
   grid-template-columns: 1fr;
-  grid-auto-rows: 1fr 100px;
+  grid-auto-rows: 1fr minmax(1fr, 100px);
 `;
 
 export const JsonEditor: React.FC = () => {

src/containers/LiveEditor/index.tsx

@@ -33,7 +33,7 @@ const wheelOptions = {
   step: 0.05,
 };
 
-const LiveEditor: React.FC = () => {
+export const LiveEditor: React.FC = () => {
   const { dispatch } = useConfig();
 
   const onInit = (ref: ReactZoomPanPinchRef) => {
@@ -68,5 +68,3 @@ const LiveEditor: React.FC = () => {
     </StyledLiveEditor>
   );
 };
-
-export default LiveEditor;