Skip to content

Commit 8cf7d65

Browse files
SeanathonSeanathon
authored
Merge pull request #53 from oslabs-beta/feature/loading
PR 06/17/21 - added basic loading screen
2 parents 1548745 + a1aa070 commit 8cf7d65

File tree

12 files changed

+127
-18
lines changed

12 files changed

+127
-18
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎LICENSE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) [2018] [GraphQL Designer]
3+
Copyright (c) [2021] [GraphQL Blueprint]
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,4 @@ npm run server
8787

8888
## License
8989

90-
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/GraphQL-Designer/graphqldesigner.com/blob/master/LICENSE.md) file for details.
90+
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/oslabs-beta/GraphQL-Blueprint/blob/main/LICENSE.md) file for details.

‎client/components/app.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { useEffect } from 'react';
22
import { connect } from 'react-redux';
33
import * as actions from '../actions/actions';
44

@@ -9,7 +9,6 @@ import SchemaApp from './schema/schema-app.jsx';
99
import DBApp from './databases/db-app.jsx';
1010
import CodeApp from './code/code-app.jsx';
1111
import GitHubButton from 'react-github-btn'
12-
import Team from './welcome/team/team-button.jsx';
1312
import Info from './navbar/info/info.jsx';
1413
//import QueryApp from './query/query-app.jsx';
1514

@@ -50,6 +49,11 @@ const App = ({ snackBar, handleSnackbarUpdate, schemaObject, saveDatabaseDataInp
5049
handleSnackbarUpdate('');
5150
}
5251

52+
useEffect(() => {
53+
const loader = document.getElementById('loader');
54+
setTimeout(() => loader.classList.add('hide'), 160);
55+
});
56+
5357
return (
5458
<div className="app-container">
5559
<MainNav />

‎client/components/welcome/team/team-container.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ const Team = () => (
88
<div className="team-container">
99
<div className="team">
1010
<div className="team-heading">
11-
<h4>Meet our Team</h4>
12-
<p>GraphQL Blueprint is an open source project recently collaborated on by the following individuals. If this project is something you’d like to iterate on, reach out to any of us or checkout our <a href="https://github.com/oslabs-beta/GraphQL-Blueprint">GitHub repo</a>!</p>
11+
<p><b>The faces behind GraphQL Blueprint.</b><br />Learn more about this open source project or fork it at our <a href="https://github.com/oslabs-beta/GraphQL-Blueprint">GitHub repo</a>!</p>
1312
</div>
1413
<div className="row">
1514
<TeamMember

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "GraphQLBlueprint",
3-
"version": "1.0.0",
3+
"version": "0.8.1",
44
"description": "A user friendly Graphql designer aimed to simplify creation and implementation of a full stack React Graphql app.",
55
"main": "index.js",
66
"keywords": [],

‎public/.DS_Store

0 Bytes
Binary file not shown.

‎public/images/graphql_blueprint-icon.svg

+3
Loading

‎public/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@
1818

1919
<body>
2020
<div id="app"></div>
21+
<div id="loader">
22+
<div class="loading-box">
23+
<div class="loading-graphic">
24+
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
25+
<path d="M19.4885 14.25C19.273 14.4952 18.6828 14.9857 18.0462 14.9857C17.1709 14.9857 16.72 14.4952 16.6039 14.25L16.405 4.24428L5.26469 10.6205L18.0462 17.7814L30.8774 10.6205L22.2238 5.66666C22.0912 5.22523 21.9055 4.20504 22.2238 3.6557C22.5421 3.10637 23.7821 3.09983 24.3624 3.16523L35.6519 9.73761L36 29.0624C35.9503 29.373 35.7513 30.0826 35.3535 30.4357C34.9556 30.7889 33.8615 30.5829 33.3641 30.4357L22.2238 24.1576C22.1907 23.7489 22.2139 22.7549 22.572 22.0486C22.93 21.3423 24.0474 21.4927 24.5613 21.6562L32.6679 26.2176V13.6614L19.4885 20.7733L19.7869 35.4876L27.595 30.9262C28.1089 30.7954 29.3059 30.7104 29.9822 31.4167C30.6586 32.1229 30.2641 33.0516 29.9822 33.4276L18.0462 40L16.6039 39.1171C11.0504 35.9944 0.466786 30 0.0426742 29.0624C-0.186711 28.5553 0.573165 28.1141 0.788677 27.9833L11.73 21.4109C12.1445 21.2965 13.1524 21.2638 13.8686 22.0486C14.5848 22.8333 14.2996 23.6508 14.0675 23.9614L5.26469 29.0624L16.6039 35.4876V20.7733L3.52402 13.6614V23.3238C3.32509 23.7162 2.74818 24.5009 2.03201 24.5009C1.31585 24.5009 0.705787 23.7162 0.490275 23.3238C0.407386 19.0894 0.291341 10.4831 0.490275 9.9338C0.689209 9.38447 1.26943 9.21444 1.53468 9.19809L17.3499 0.173323C17.7644 0.0425294 18.7027 -0.140582 19.1403 0.173323C19.578 0.487228 19.6874 0.990784 19.6874 1.20332L19.4885 14.25Z" fill="#194A9A" stroke="#194A9A"/>
26+
</svg>
27+
</div>
28+
<div class="loading-text">
29+
Blueprint Loading...
30+
</div>
31+
</div>
32+
</div>
2133
<script src="vendor.js"></script>
2234
<script src="main.js"></script>
2335
</body>

‎public/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/styles.css

+92-1
Original file line numberDiff line numberDiff line change
@@ -165,4 +165,95 @@ footer ul li {
165165
footer ul li small {
166166
text-decoration: none!important;
167167
font-size: 1em;
168-
}
168+
}
169+
170+
#loader {
171+
position: fixed;
172+
top: 0;
173+
left: 0;
174+
z-index: 100;
175+
width: 100vw;
176+
height: 100vh;
177+
background-color: #F2F4F6;
178+
display: flex;
179+
justify-content: center;
180+
align-items: center;
181+
flex-direction: row;
182+
opacity: 1;
183+
visibility: visible;
184+
pointer-events: all;
185+
/* transition: all 1s linear; */
186+
}
187+
188+
#loader.hide {
189+
opacity: 0;
190+
pointer-events: none;
191+
visibility: hidden;
192+
transition: all 1s linear;
193+
}
194+
195+
.loading-graphic,
196+
.loading-text {
197+
text-align: center;
198+
}
199+
200+
.loading-text {
201+
font-style: italic;
202+
}
203+
204+
.loading-graphic svg {
205+
width: 45%;
206+
height: 45%;
207+
}
208+
209+
.loading-text {
210+
margin-top: 1rem;
211+
animation-fill-mode: both;
212+
animation-direction: alternate;
213+
animation-name: colorfill;
214+
animation-iteration-count: infinite;
215+
animation-duration: 1.5s, 2s, 2.75s;
216+
animation-delay: 0s, 0.75s, 1.25s;
217+
}
218+
219+
.loading-graphic path {
220+
stroke-dashoffset: 0;
221+
stroke-dasharray: 0, 0, 0, 390;
222+
fill-opacity: 0;
223+
stroke-opacity: 1;
224+
animation-timing-function: ease-in-out;
225+
animation-fill-mode: both;
226+
animation-direction: alternate;
227+
animation-name: dash;
228+
animation-iteration-count: infinite;
229+
230+
/* HALF-TIME */
231+
/* animation-duration: 1.5s, 2s, 2.75s;
232+
animation-delay: 0s, 0.75s, 1.25s; */
233+
234+
/* TIME */
235+
animation-duration: 3s, 4s, 2s;
236+
animation-delay: 0s, 1s, 1s;
237+
}
238+
239+
@keyframes dash {
240+
to {
241+
stroke-dashoffset: 390;
242+
stroke-dasharray: 0, 0, 390, 0;
243+
}
244+
}
245+
246+
@keyframes strokefade {
247+
to {
248+
stroke-opacity: 0;
249+
}
250+
}
251+
252+
@keyframes colorfill {
253+
from {
254+
opacity: 0;
255+
}
256+
to {
257+
opacity: 100;
258+
}
259+
}

‎public/vendor.js

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)