performance fixes

Author: timsuchanek

packages/graphql-playground-electron/package.json

@@ -4,7 +4,7 @@
   "homepage": "https://github.com/graphcool/graphql-playground",
   "repository": "graphcool/graphql-playground",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "author": {
     "name": "Graphcool",
     "email": "[email protected]",
@@ -96,7 +96,7 @@
     "graphql-config": "^2.0.1",
     "graphql-config-extension-graphcool": "1.0.8",
     "graphql-config-extension-prisma": "0.0.9",
-    "graphql-playground-react": "1.4.6",
+    "graphql-playground-react": "1.4.7",
     "js-yaml": "^3.10.0",
     "lodash.merge": "^4.6.0",
     "minimist": "^1.2.0",

packages/graphql-playground-electron/yarn.lock

@@ -3619,9 +3619,9 @@ [email protected]:
   dependencies:
     graphql-config "1.1.7"
 
-[email protected].6:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/graphql-playground-react/-/graphql-playground-react-1.4.6.tgz#6693f58ce5bf33ad7740554e93a78629334c81ad"
+[email protected].7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/graphql-playground-react/-/graphql-playground-react-1.4.7.tgz#69a503230b70f6b14c114005107df05310027168"
   dependencies:
     apollo-link "^1.0.7"
     apollo-link-http "^1.3.2"
@@ -7405,6 +7405,18 @@ styled-components@^3.0.1:
     postcss-load-plugins "^2.2.0"
     styled-jsx "^0.5.7"
 
+"styled-jsx-postcss@git+https://github.com/timsuchanek/styled-jsx-postcss.git#build3":
+  version "0.2.0"
+  uid "677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
+  resolved "git+https://github.com/timsuchanek/styled-jsx-postcss.git#677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
+  dependencies:
+    babel-traverse "^6.21.0"
+    babylon "^6.14.1"
+    deasync "^0.1.9"
+    postcss "^5.2.8"
+    postcss-load-plugins "^2.2.0"
+    styled-jsx "^0.5.7"
+
 [email protected], styled-jsx@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"

packages/graphql-playground-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-react",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",

packages/graphql-playground-react/src/components/MiddlewareApp.tsx

@@ -111,6 +111,8 @@ export default class MiddlewareApp extends React.Component<Props, State> {
     subscriptionEndpoint =
       this.normalizeSubscriptionUrl(endpoint, subscriptionEndpoint) || undefined
 
+    this.removeLoader()
+
     this.state = {
       endpoint: this.absolutizeUrl(endpoint),
       subscriptionEndpoint,
@@ -124,6 +126,13 @@ export default class MiddlewareApp extends React.Component<Props, State> {
     }
   }
 
+  removeLoader() {
+    const loadingWrapper = document.getElementById('loading-wrapper')
+    if (loadingWrapper) {
+      loadingWrapper.remove()
+    }
+  }
+
   getGraphcoolSubscriptionEndpoint(endpoint) {
     if (endpoint.includes('api.graph.cool')) {
       return `wss://subscriptions.graph.cool/v1/${

packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx

@@ -93,7 +93,8 @@ const Circle = withProps<Props>()(styled.circle)`
   transition: opacity 0.3s ease-in-out;
   opacity: ${p => (p.isReloadingSchema ? 1 : 0)};
   transform-origin: 9.5px 10px;
-  animation: ${refreshFrames} 2s linear infinite;
+  animation: ${refreshFrames} 2s linear ${p =>
+  p.isReloadingSchema ? 'infinite' : ''};
 `
 
 const Icon = withProps<Props>()(styled.path)`