/
_ProgressIndicator.svelte
70 lines (63 loc) · 1.62 KB
/
_ProgressIndicator.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div style="margin-bottom: 1em;">
<Button on:click={() => loadThings(true)}>Do Pretend Loading</Button>
</div>
<DataTable table$aria-label="User list" style="width: 100%;">
<Head>
<Row>
<Cell numeric>ID</Cell>
<Cell style="width: 100%;">Name</Cell>
<Cell>Username</Cell>
<Cell>Email</Cell>
</Row>
</Head>
<Body>
{#each items as item (item.id)}
<Row>
<Cell numeric>{item.id}</Cell>
<Cell>{item.name}</Cell>
<Cell>{item.username}</Cell>
<Cell>{item.email}</Cell>
</Row>
{/each}
</Body>
<LinearProgress
indeterminate
bind:closed={loaded}
aria-label="Data is being loaded..."
slot="progress"
/>
</DataTable>
<script lang="ts">
import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
import LinearProgress from '@smui/linear-progress';
import Button from '@smui/button';
type User = {
id: number;
name: string;
username: string;
email: string;
website: string;
};
let items: User[] = [];
let loaded = false;
loadThings(false);
function loadThings(wait: boolean) {
if (typeof fetch !== 'undefined') {
loaded = false;
fetch(
'https://gist.githubusercontent.com/hperrin/e24a4ebd9afdf2a8c283338ae5160a62/raw/dcbf8e6382db49b0dcab70b22f56b1cc444f26d4/users.json',
)
.then((response) => response.json())
.then((json) =>
setTimeout(
() => {
items = json;
loaded = true;
},
// Simulate a long load time.
wait ? 2000 : 0,
),
);
}
}
</script>