Animating the first loading screen

What’s up?

👋 hey there!

Awesome job on the playground folks, this is awesome!!

I’ve come up with a new loading flow for the Playground, thanks @schickling & @julianbauer for the design reviews! 🎩

It has been made with care to:

• not add new dependencies to the project by using CSS animations with React & styled-components;
• rendering well on all major browsers, there were some good challenges here! I didn’t test Edge if someone can tell me how it looks? See link to the prototype below 😇

Current state

Before opening a PR to potentially integrate it to the codebase, I’d like to see with you what should be done.

It appears that the approximately same loading screen has 3 different implementations at the moment:

• a static React component on the web app (source)
• an animated React component on the electron app, not used at the moment (source)
• a static HTML landing repeated 5 times across the middleware as render-playground-page.ts 😄 (screenshot)

So…?

Should a PR about the Loading component be targeted only at the web app or include the other packages?

If it should include the other packages:

• does the electron app need a Loading component? It doesn’t rely on a loading state at the moment and uses directly the Playground component, not App.
• should all render-playground-page.ts pages be unified somehow? if yes, should this page use an already bundled component to avoid loading react & react-dom from a cdn like graphiql?

Voilà, I’d love to help on that, and even other things! ✋

Prototype: https://codepen.io/xavcz/pen/bYReeM/left?editors=0010

[xavxyz]

Yay, thanks @timsuchanek: excellent explanation of the whole thing, it makes a lot of sense! 👌

Agree with you! Let’s implement the animation in the most straightforward way for the most efficiency: loader implemented in pure html/css/svg 🚀

But it would be nice if the loading screen is still there while loading and initializing the schema.

Yeah definitely, I believe we can get rid of the Loading component, and get React (= the Playground component when mounted?) to communicate with the node where the HTML loader is hosted.

Thus we could avoid this behavior: HTML Loader -> React Loader -> Playground

We should add a package graphql-playground-middleware that includes the render-playground-page.ts and is being required by the other packages.

Let’s go for all that, I’ll work on a PR!

[schickling]

Yeah, this is in general a tricky topic. Here are two (hacky) ways how you could handle this (maybe someone knows a better method?):

1. Publish your fork on NPM as @xavcz/graphql-playground
2. Deploy your local setup to AWS Lambda via Serverless (which uploads your actual node_modules)