feat(graphql-playground-react): added spinner for schema fetching

Author: timsuchanek

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

@@ -122,6 +122,7 @@ export interface State {
   nextQueryStartTime?: Date
   tracingSupported?: boolean
   queryVariablesActive: boolean
+  endpointUnreachable: boolean
 }
 
 export interface SimpleProps {
@@ -251,6 +252,7 @@ export class GraphQLEditor extends React.PureComponent<
       subscription: null,
       selectedVariableNames: [],
       queryVariablesActive,
+      endpointUnreachable: false,
       ...queryFacts,
     }
 
@@ -502,6 +504,7 @@ export class GraphQLEditor extends React.PureComponent<
             sharing={this.props.sharing}
             onReloadSchema={this.reloadSchema}
             fixedEndpoint={this.props.fixedEndpoint}
+            endpointUnreachable={this.state.endpointUnreachable}
           />
           <div
             ref={this.setEditorBarComponent}
@@ -805,15 +808,25 @@ export class GraphQLEditor extends React.PureComponent<
           this.renewStacks(schema)
           this.setState({
             schema,
+            endpointUnreachable: false,
             tracingSupported,
           })
         }
       })
-      .catch(error => {
-        this.setState({
-          schema: null,
-          responses: [{ date: error.message, time: new Date() }],
-        })
+      .catch(async error => {
+        if (error.message === 'Failed to fetch') {
+          setTimeout(() => {
+            this.setState({
+              endpointUnreachable: true,
+            })
+            this.ensureOfSchema()
+          }, 1000)
+        } else {
+          this.setState({
+            schema: null,
+            responses: [{ date: error.message, time: new Date() }],
+          })
+        }
       })
   }
 

packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts

@@ -36,6 +36,7 @@ export class SchemaFetcher {
       },
       body: JSON.stringify({ query: introspectionQuery }),
     })
+
     const schemaData = await response.json()
 
     if (schemaData && (schemaData.errors || !schemaData.data)) {

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

@@ -19,10 +19,12 @@ export interface Props {
   onReloadSchema?: () => void
   sharing?: SharingProps
   fixedEndpoint?: boolean
+  endpointUnreachable: boolean
 }
 
 export default class TopBar extends React.Component<Props, {}> {
   render() {
+    const { endpointUnreachable } = this.props
     return (
       <TopBarWrapper>
         <Button onClick={this.props.onClickPrettify}>Prettify</Button>
@@ -36,12 +38,19 @@ export default class TopBar extends React.Component<Props, {}> {
             disabled={this.props.fixedEndpoint}
             className={cx({ active: !this.props.fixedEndpoint })}
           />
-          <ReloadIcon
-            src={require('graphcool-styles/icons/fill/reload.svg')}
-            width={20}
-            height={20}
-            onClick={this.props.onReloadSchema}
-          />
+          {endpointUnreachable ? (
+            <ReachError>
+              <span>Server cannot be reached</span>
+              <Spinner />
+            </ReachError>
+          ) : (
+            <ReloadIcon
+              src={require('graphcool-styles/icons/fill/reload.svg')}
+              width={20}
+              height={20}
+              onClick={this.props.onReloadSchema}
+            />
+          )}
         </UrlBarWrapper>
         <CopyToClipboard text={this.props.curl}>
           <Button>Copy CURL</Button>
@@ -155,6 +164,14 @@ const UrlBarWrapper = styled.div`
   align-items: center;
 `
 
+const ReachError = styled.div`
+  position: absolute;
+  right: 5px;
+  display: flex;
+  align-items: center;
+  color: #f25c54;
+`
+
 const ReloadIcon = styled(Icon)`
   position: absolute;
   right: 5px;
@@ -167,3 +184,39 @@ const ReloadIcon = styled(Icon)`
     }
   }
 ` as any // TODO remove this once typings are fixed
+
+const Spinner = styled.div`
+  & {
+    width: 40px;
+    height: 40px;
+    margin: 40px auto;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
+    animation: sk-pulseScaleOut 1s infinite ease-in-out;
+  }
+
+  @-webkit-keyframes sk-pulseScaleOut {
+    0% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+
+  @keyframes sk-pulseScaleOut {
+    0% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+`

packages/graphql-playground-react/src/components/PlaygroundStorage.ts

@@ -200,7 +200,8 @@ export default class PlaygroundStorage {
   private getProject() {
     let result: any = null
     try {
-      result = JSON.parse(localStorage.getItem(this.endpoint) || '{}')
+      const data = localStorage.getItem(this.endpoint) || '{}'
+      result = JSON.parse(data)
     } catch (e) {
       /* tslint:disable-next-line */
       console.info(e)
@@ -212,6 +213,7 @@ export default class PlaygroundStorage {
         date: new Date(item.date),
       }))
     }
+
     return PlaygroundStorage.runMigration(result, this.endpoint)
   }