Animated loading screen

[xavxyz]

Fixes #250

Initial draft

This shows an animated loading screen when opening the /playground route.

The playground UI code is still loaded via a CDN.

The loading UI code has been generated and slightly modified for readability from the output of the codepen prototype (+ a jest snapshot mill). It may get minified in the future?

There is a flag to disable it in local dev by looking for "localhost" in the headers. What would be a better way (no such thing as process.env.NODE_ENV)?

The render-playground-page.ts has been extracted in its own module, only used for Express at the moment.

How to test

My process so far below. Is there another way (with less context switching)?

# install, build & symlink the html render function
cd packages/graphql-playground-html
yarn
yarn build
yarn link

# do the same thing with the express middleware: it depens on the graphql-playground-html pkg
cd ../graphql-playground-middleware-express
yarn
yarn link graphql-playground-html
yarn build
yarn link

# well, repeat for the express middleware example
cd examples/basic
yarn link graphql-playground-middleware-express
yarn 
yarn start
# 🎉

[CLAassistant]

All committers have signed the CLA.

[morajabi]

Wow this graphql-playground-html will make the code a lot cleaner! Great job @xavcz, will test it.

[xavxyz]

set isLocal to false to have a glimpse of the flashy loading component in local mode

[timsuchanek]

Thanks for the PR @xavcz!
In the meantime I started with the graphql-playground-middleware component where I added some more logic to the render-playground-page file.
But I like the name graphql-playground-html more, so we can just rename it and add your changes.
Do you think you could adjust from the latest master branch and rename graphql-playground-middleware to graphql-playground-html? Sorry for making you the double effort!
I will look into the PR in depth in the weekend :)

[timsuchanek]

Thanks a lot! I even want bad internet connection now