Skip to content

Commit 14b06a0

Browse files
Rich-HarrisRich-Harris
authored
Remove /loading (sveltejs#66)
* fix some stuff * remove /loading page
1 parent 49c2264 commit 14b06a0

File tree

4 files changed

+60
-49
lines changed

4 files changed

+60
-49
lines changed

‎src/hooks.js

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,5 @@
1-
const loading = `
2-
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128">
3-
<title>svelte-logo</title>
4-
<path
5-
d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
6-
style="fill: #ff3e00"
7-
/>
8-
<path
9-
d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
10-
style="fill: #fff"
11-
/>
12-
</svg>
13-
14-
<style>
15-
body {
16-
display: flex;
17-
align-items: center;
18-
justify-content: center;
19-
background: #f9f9f9;
20-
user-select: none;
21-
height: 100%;
22-
margin: 0;
23-
padding: 0;
24-
}
25-
26-
svg {
27-
width: 100px;
28-
height: 100px;
29-
filter: grayscale(1) opacity(0.1);
30-
}
31-
</style>
32-
`;
33-
341
/** @type {import('@sveltejs/kit').Handle} */
352
export async function handle({ event, resolve }) {
36-
if (event.url.pathname === '/loading') {
37-
return new Response(loading, {
38-
headers: {
39-
'Content-Type': 'text/html',
40-
'Cross-Origin-Embedder-Policy': 'require-corp'
41-
}
42-
});
43-
}
44-
453
const response = await resolve(event);
464

475
response.headers.set('cross-origin-opener-policy', 'same-origin');

‎src/routes/tutorial/[slug]/_/Loading.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="loading">
2+
<svg width="107" height="128" viewBox="0 0 107 128">
3+
<path
4+
d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
5+
style="fill: #ff3e00"
6+
/>
7+
<path
8+
d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
9+
style="fill: #fff"
10+
/>
11+
</svg>
12+
</div>
13+
14+
<style>
15+
.loading {
16+
position: absolute;
17+
width: 100%;
18+
height: 100%;
19+
top: 0;
20+
left: 0;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
background: #f9f9f9;
25+
user-select: none;
26+
}
27+
28+
svg {
29+
width: 100px;
30+
height: 100px;
31+
filter: grayscale(1) opacity(0.1);
32+
}
33+
</style>

‎src/routes/tutorial/[slug]/index.svelte

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
import Sidebar from './_/Sidebar.svelte';
2323
import Chrome from './_/Chrome.svelte';
2424
import { Icon } from '@sveltejs/site-kit';
25+
import Loading from './_/Loading.svelte';
2526
2627
/** @type {import('$lib/types').PartStub[]} */
2728
export let index;
@@ -45,6 +46,7 @@
4546
4647
/** @type {HTMLIFrameElement} */
4748
let iframe;
49+
let loading = true;
4850
4951
/** @type {Record<string, boolean>}*/
5052
let complete_states = {};
@@ -130,7 +132,7 @@
130132
completed = false;
131133
132134
clearTimeout(timeout);
133-
set_iframe_src('/loading');
135+
loading = true;
134136
135137
if (adapter) {
136138
expected.clear();
@@ -172,7 +174,7 @@
172174
if (dev && !iframe) return;
173175
174176
// we lost contact, refresh the page
175-
set_iframe_src('/loading');
177+
loading = true;
176178
set_iframe_src(adapter.base + path);
177179
}, 500);
178180
} else if (e.data.type === 'hmr') {
@@ -262,6 +264,8 @@
262264
parentNode?.removeChild(iframe);
263265
iframe.src = src;
264266
parentNode?.appendChild(iframe);
267+
268+
loading = false;
265269
}
266270
267271
const hidden = new Set(['__client.js', 'node_modules']);
@@ -354,7 +358,7 @@
354358
<Chrome
355359
{path}
356360
on:refresh={() => {
357-
set_iframe_src('/loading');
361+
loading = true;
358362
set_iframe_src(adapter.base + path);
359363
}}
360364
on:change={(e) => {
@@ -364,7 +368,13 @@
364368
}}
365369
/>
366370
367-
<iframe bind:this={iframe} title="Output" src="/loading" />
371+
<div class="content">
372+
<iframe bind:this={iframe} title="Output" />
373+
374+
{#if loading}
375+
<Loading />
376+
{/if}
377+
</div>
368378
</section>
369379
</SplitPane>
370380
</section>
@@ -398,11 +408,17 @@
398408
position: relative;
399409
background: #ddd;
400410
padding: 0.5rem;
401-
width: calc(100% + 1px);
411+
width: 100%;
402412
height: 4rem;
413+
border-right: 1px solid var(--border-color);
403414
opacity: 1;
404415
}
405416
417+
.navigator button:disabled {
418+
background: #f9f9f9; /* TODO consistent grays */
419+
color: #ddd;
420+
}
421+
406422
.navigator button:not(:disabled) {
407423
background: var(--prime);
408424
color: white;
@@ -434,13 +450,18 @@
434450
flex-direction: column;
435451
}
436452
453+
.content {
454+
position: relative;
455+
}
456+
437457
iframe {
438458
width: 100%;
439459
height: 100%;
440460
flex: 1;
441461
resize: none;
442462
box-sizing: border-box;
443463
border: none;
464+
background: white;
444465
}
445466
446467
.editor-container {

‎svelte.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ const config = {
77
adapter: adapter(),
88

99
prerender: {
10-
default: true,
11-
entries: ['*', '/loading']
10+
default: true
1211
},
1312

1413
vite: {

0 commit comments

Comments
 (0)