Skip to content

Commit c082c07

Browse files
xavxyzxavxyz
committed
feat(middleware): draft animated loading screen
This shows an animated loading screen when opening the `/playground` route. There is a flag to disable it in local dev (looking for "localhost" in the headers 🙄) The `render-playground-page.ts` has been extracted in its own module, only used for Express at the moment.
1 parent 0ebd6d5 commit c082c07

File tree

7 files changed

+641
-0
lines changed

7 files changed

+641
-0
lines changed

‎packages/graphql-playground-html/.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
example/node_modules
6+
example/yarn.lock
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/dist
13+
14+
# misc
15+
.DS_Store
16+
.env
17+
npm-debug.log
18+
.idea

‎packages/graphql-playground-html/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "graphql-playground-html",
3+
"version": "1.2.0",
4+
"homepage":
5+
"https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-html",
6+
"description":
7+
"GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
8+
"contributors": [
9+
"Tim Suchanek <[email protected]>",
10+
"Johannes Schickling <[email protected]>",
11+
"Mohammad Rajabifard <[email protected]>"
12+
],
13+
"repository": "http://github.com/graphcool/graphql-playground.git",
14+
"license": "SEE LICENSE IN LICENSE",
15+
"main": "dist/index.js",
16+
"files": ["dist"],
17+
"scripts": {
18+
"build": "tsc",
19+
"prepublishOnly": "npm run build"
20+
},
21+
"keywords": ["graphql", "graphiql", "playground", "graphcool"],
22+
"devDependencies": {
23+
"@types/node": "^8.0.47",
24+
"typescript": "^2.6.1"
25+
},
26+
"typings": "dist/index.d.ts",
27+
"typescript": {
28+
"definition": "dist/index.d.ts"
29+
}
30+
}

‎packages/graphql-playground-html/src/index.ts

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import renderLoading from './render-loading'
2+
3+
export interface MiddlewareOptions {
4+
endpoint: string
5+
subscriptionEndpoint?: string
6+
version: string
7+
isLocal: boolean
8+
}
9+
10+
export default function renderPlaygroundPage(options: MiddlewareOptions) {
11+
const loading = renderLoading()
12+
13+
return `
14+
<!DOCTYPE html>
15+
<html>
16+
17+
<head>
18+
<meta charset=utf-8 />
19+
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
20+
<title>GraphQL Playground</title>
21+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground@${
22+
options.version
23+
}/build/static/css/index.css"
24+
/>
25+
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground@${
26+
options.version
27+
}/build/favicon.png" />
28+
<script src="//cdn.jsdelivr.net/npm/graphql-playground@${
29+
options.version
30+
}/build/static/js/middleware.js"></script>
31+
</head>
32+
33+
<body>
34+
<style type="text/css">
35+
html {
36+
font-family: "Open Sans", sans-serif;
37+
overflow: hidden;
38+
}
39+
40+
body {
41+
margin: 0;
42+
background: #172a3a;
43+
}
44+
45+
.playgroundIn {
46+
-webkit-animation: playgroundIn 0.5s ease-out forwards;
47+
animation: playgroundIn 0.5s ease-out forwards;
48+
}
49+
50+
@-webkit-keyframes playgroundIn {
51+
from {
52+
opacity: 0;
53+
-webkit-transform: translateY(10px);
54+
-ms-transform: translateY(10px);
55+
transform: translateY(10px);
56+
}
57+
to {
58+
opacity: 1;
59+
-webkit-transform: translateY(0);
60+
-ms-transform: translateY(0);
61+
transform: translateY(0);
62+
}
63+
}
64+
65+
@keyframes playgroundIn {
66+
from {
67+
opacity: 0;
68+
-webkit-transform: translateY(10px);
69+
-ms-transform: translateY(10px);
70+
transform: translateY(10px);
71+
}
72+
to {
73+
opacity: 1;
74+
-webkit-transform: translateY(0);
75+
-ms-transform: translateY(0);
76+
transform: translateY(0);
77+
}
78+
}
79+
</style>
80+
${options.isLocal ? '' : loading.container}
81+
<div id="root" />
82+
<script type="text/javascript">
83+
window.addEventListener('load', function (event) {
84+
${options.isLocal ? '' : loading.script}
85+
86+
const root = document.getElementById('root');
87+
root.classList.add('playgroundIn');
88+
89+
GraphQLPlayground.init(root, ${JSON.stringify(options, null, 2)})
90+
})
91+
</script>
92+
</body>
93+
94+
</html>`
95+
}

0 commit comments

Comments
 (0)