Skip to content

Commit 2f5e0fa

Browse files
CompuIvesCompuIves
committed
New loading indicator
1 parent 4e0eea9 commit 2f5e0fa

File tree

6 files changed

+230
-99
lines changed

6 files changed

+230
-99
lines changed

‎packages/app/src/sandbox/compile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -482,7 +482,7 @@ async function compile({
482482
{
483483
disableExternalConnection: disableDependencyPreprocessing,
484484
resolutions: parsedPackageJSON.resolutions,
485-
showFullScreen,
485+
showFullScreen: firstLoad,
486486
}
487487
);
488488

‎packages/app/src/sandbox/npm/fetch-dependencies.ts‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,10 @@ function removeSpacesFromDependencies(dependencies: Object) {
115115
return newDeps;
116116
}
117117

118-
async function getDependencies(dependencies: Object, showScreen: boolean) {
118+
async function getDependencies(
119+
dependencies: Object,
120+
showLoadingFullScreen: boolean
121+
) {
119122
const absoluteDependencies = await getAbsoluteDependencies(
120123
removeSpacesFromDependencies(dependencies)
121124
);
@@ -125,7 +128,7 @@ async function getDependencies(dependencies: Object, showScreen: boolean) {
125128
setScreen({
126129
type: 'loading',
127130
text: 'Downloading Dependencies...',
128-
showScreen,
131+
showFullScreen: showLoadingFullScreen,
129132
});
130133

131134
warmupPackager(`${NEW_PACKAGER_URL}/${dependencyUrl}`, 'POST');
@@ -138,7 +141,7 @@ async function getDependencies(dependencies: Object, showScreen: boolean) {
138141
setScreen({
139142
type: 'loading',
140143
text: 'Resolving Dependencies...',
141-
showScreen,
144+
showFullScreen: showLoadingFullScreen,
142145
});
143146

144147
// The dep has not been generated yet...
@@ -150,7 +153,7 @@ async function getDependencies(dependencies: Object, showScreen: boolean) {
150153
setScreen({
151154
type: 'loading',
152155
text: 'Downloading Dependencies...',
153-
showScreen,
156+
showFullScreen: showLoadingFullScreen,
154157
});
155158

156159
return requestPackager(`${BUCKET_URL}/${url}`);
@@ -160,16 +163,23 @@ async function getDependencies(dependencies: Object, showScreen: boolean) {
160163
export async function fetchDependencies(
161164
npmDependencies: Dependencies,
162165
_: any,
163-
showScreen: boolean
166+
showLoaderFullScreen: boolean
164167
) {
165168
if (Object.keys(npmDependencies).length !== 0) {
166169
// New Packager flow
167170

168171
try {
169-
const result = await getDependencies(npmDependencies, showScreen);
170-
171-
if (showScreen) {
172-
setScreen({ type: 'loading', text: 'Transpiling Modules...' });
172+
const result = await getDependencies(
173+
npmDependencies,
174+
showLoaderFullScreen
175+
);
176+
177+
if (showLoaderFullScreen) {
178+
setScreen({
179+
type: 'loading',
180+
text: 'Transpiling Modules...',
181+
showFullScreen: showLoaderFullScreen,
182+
});
173183
}
174184

175185
return result;

packages/app/src/sandbox/status-screen/index.js renamed to packages/app/src/sandbox/status-screen/index.ts

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1+
// @ts-ignore
12
import indicatorHtml from '!raw-loader!./indicator-screen.html';
2-
// @flow
33
// This is the loading screen
4+
// @ts-ignore
45
import loadingHtml from '!raw-loader!./loading-screen.html';
56

67
import { createOverlay, resetOverlay } from './overlay-manager';
78

89
type LoadingScreen = {
9-
type: 'loading',
10-
text: string,
11-
showFullScreen: boolean,
10+
type: 'loading';
11+
text: string;
12+
showFullScreen?: boolean;
1213
};
1314

1415
type Screen = LoadingScreen;
1516

16-
let currentScreen: ?Screen = null;
17-
let firstLoaded = null;
18-
17+
let currentScreen: Screen = null;
18+
let loadTimeoutID: number = null;
1919
let iframeReference = null;
2020

2121
function changeText(text: string) {
@@ -36,26 +36,35 @@ export function resetScreen() {
3636
currentScreen = null;
3737
iframeReference = null;
3838
resetOverlay();
39+
40+
clearTimeout(loadTimeoutID);
41+
loadTimeoutID = null;
3942
}
4043

4144
export default function setScreen(screen: Screen) {
45+
const showFullScreen =
46+
typeof screen.showFullScreen === 'undefined' ? true : screen.showFullScreen;
47+
4248
if (!iframeReference) {
43-
if (!firstLoaded) {
49+
if (!loadTimeoutID) {
4450
// Give the illusion of faster loading by showing the loader screen later
45-
firstLoaded = setTimeout(async () => {
46-
if (!iframeReference && currentScreen) {
47-
iframeReference = await createOverlay(
48-
screen.showFullScreen ? loadingHtml : indicatorHtml,
49-
screen.showFullScreen
50-
);
51-
}
51+
loadTimeoutID = window.setTimeout(
52+
async () => {
53+
if (!iframeReference && currentScreen) {
54+
iframeReference = await createOverlay(
55+
showFullScreen ? loadingHtml : indicatorHtml,
56+
showFullScreen
57+
);
58+
}
5259

53-
if (currentScreen) {
54-
changeText(currentScreen.text);
55-
}
60+
if (currentScreen) {
61+
changeText(currentScreen.text);
62+
}
5663

57-
firstLoaded = null;
58-
}, 1000);
64+
loadTimeoutID = null;
65+
},
66+
showFullScreen ? 1000 : 0
67+
);
5968
}
6069
} else if (currentScreen) {
6170
changeText(currentScreen.text);

‎packages/app/src/sandbox/status-screen/indicator-screen.html‎

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
body {
44
color: #fff;
55
font-family: 'Inter UI', sans-serif;
6-
background: #151515;
6+
background: transparent;
7+
-webkit-font-smoothing: antialiased;
78
}
89

910
.container {
@@ -15,9 +16,102 @@
1516
.text {
1617
font-size: 0.8rem;
1718
width: 100%;
18-
font-weight: 200;
19+
font-weight: 400;
20+
margin-left: 1rem;
1921
}
22+
23+
.cube {
24+
transform: translate(-34px, 15px) scale(0.25, 0.25);
25+
}
26+
27+
.cube,
28+
.cube * {
29+
position: absolute;
30+
width: 6rem;
31+
height: 6rem;
32+
}
33+
.cube .sides * {
34+
box-sizing: border-box;
35+
border: 10px solid rgba(0,0,0,0.7);
36+
border-radius: 8px;
37+
background: rgba(255, 255, 255, 0.6);
38+
}
39+
40+
@keyframes rotate {
41+
0% {
42+
transform: rotateX(-25.5deg) rotateY(45deg);
43+
}
44+
45+
100% {
46+
transform: rotateX(-25.5deg) rotateY(405deg);
47+
}
48+
}
49+
50+
.sides {
51+
animation: rotate 0.8s linear infinite;
52+
animation-fill-mode: forwards;
53+
transform-style: preserve-3d;
54+
transform: rotateX(-25.5deg) rotateY(45deg);
55+
}
56+
57+
.cube .sides .top {
58+
animation: top-animation 3s ease infinite;
59+
animation-delay: 0ms;
60+
transform: rotateX(90deg) translateZ(44px);
61+
animation-fill-mode: forwards;
62+
transform-origin: 50% 50%;
63+
}
64+
65+
.cube .sides .bottom {
66+
animation: bottom-animation 3s ease infinite;
67+
animation-delay: 0ms;
68+
transform: rotateX(-90deg) translateZ(44px);
69+
animation-fill-mode: forwards;
70+
transform-origin: 50% 50%;
71+
}
72+
73+
.cube .sides .front {
74+
animation: front-animation 3s ease infinite;
75+
animation-delay: 100ms;
76+
transform: rotateY(0deg) translateZ(44px);
77+
animation-fill-mode: forwards;
78+
transform-origin: 50% 50%;
79+
}
80+
81+
.cube .sides .back {
82+
animation: back-animation 3s ease infinite;
83+
animation-delay: 100ms;
84+
transform: rotateY(-180deg) translateZ(44px);
85+
animation-fill-mode: forwards;
86+
transform-origin: 50% 50%;
87+
}
88+
89+
.cube .sides .left {
90+
animation: left-animation 3s ease infinite;
91+
animation-delay: 100ms;
92+
transform: rotateY(-90deg) translateZ(44px);
93+
animation-fill-mode: forwards;
94+
transform-origin: 50% 50%;
95+
}
96+
97+
.cube .sides .right {
98+
animation: right-animation 3s ease infinite;
99+
animation-delay: 100ms;
100+
transform: rotateY(90deg) translateZ(44px);
101+
animation-fill-mode: forwards;
102+
transform-origin: 50% 50%;
103+
}
104+
20105
</style>
21106
<div class="container">
22-
<div class="text">Dowloading dependencies</div>
107+
<div class="cube">
108+
<div class="sides">
109+
<div class="top"></div>
110+
<div class="right"></div>
111+
<div class="bottom"></div>
112+
<div class="left"></div>
113+
<div class="front"></div>
114+
<div class="back"></div>
115+
</div>
116+
</div>
23117
</div>

‎packages/app/src/sandbox/status-screen/overlay-manager.js‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)