better result viewer performance

Author: timsuchanek

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -365,7 +365,7 @@ class GraphQLEditor extends React.PureComponent<
                 >
                   Tracing
                 </div>
-                <ReponseTracing />
+                <ReponseTracing open={this.props.responseTracingOpen} />
               </div>
             </div>
           </div>

packages/graphql-playground-react/src/components/Playground/ResponseTracing.tsx

@@ -73,9 +73,13 @@ const TracingRows = styled.div`
   height: calc(100% + 116px);
 `
 
-class ResponseTracing extends React.PureComponent<ReduxProps> {
+interface Props {
+  open: boolean
+}
+
+class ResponseTracing extends React.PureComponent<ReduxProps & Props> {
   render() {
-    const { tracing, tracingSupported, startTime, endTime } = this.props
+    const { tracing, tracingSupported, startTime, endTime, open } = this.props
     const requestMs =
       tracing && startTime
         ? Math.abs(new Date(tracing.startTime).getTime() - startTime.getTime())
@@ -85,9 +89,10 @@ class ResponseTracing extends React.PureComponent<ReduxProps> {
         ? Math.abs(endTime.getTime() - new Date(tracing.endTime).getTime())
         : 0
     const requestDuration = 1000 * 1000 * requestMs
+
     return (
       <TracingWrapper>
-        {tracing ? (
+        {tracing && open ? (
           <TracingRows>
             <TracingRow
               path={['Request']}

packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx

@@ -67,7 +67,6 @@ export class ResultViewer extends React.Component<Props, {}> {
         'Alt-Left': 'goGroupLeft',
         'Alt-Right': 'goGroupRight',
       },
-      viewportMargin: Infinity,
     })
   }
 
@@ -93,9 +92,6 @@ export class ResultViewer extends React.Component<Props, {}> {
             background: none;
             position: relative !important;
           }
-          .result-codemirror :global(.CodeMirror-scroll) {
-            overflow: auto !important;
-          }
         `}</style>
       </div>
     )