-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
54 lines (46 loc) · 1.41 KB
/
app.js
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
const {
createElement: h,
useState,
unstable_useTransition: useTransition,
} = require('react')
const { createResourceFactory } = require('react-lazy-data')
const { Suspense } = require('react')
const delay = () => new Promise(r => setTimeout(r, 1000));
const api = async props => {
// console.log('api');
await delay();
return { text: `id: ${props.id}` };
};
const Resource = createResourceFactory(api, {
id: 'app',
// id: `${Math.random()}`,
serialize: props => `${props.id}`,
// serialize: () => `${Math.random()}`,
})
function Suspended(props) {
const [resource, update_] = useState(createResource());
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });
const update = () => {
startTransition(() => {
resource.dispose();
update_(createResource(resource.id + 1))
})
}
return h(Suspense, { fallback: 'Loading' }, h(App, { resource, update, isPending, ...props }));
// return h(App, { resource, update, ...props });
// return h(AppWrapper, { resource, update, ...props });
}
function createResource(id = 0) {
// console.log('Creating resource', id);
const resource = Resource.create({ id });
resource.id = id
return resource;
}
function App({ resource, update, isPending }) {
const data = resource.read();
return h('button', {
disabled: isPending,
onClick: update
}, isPending ? 'Loading...' : data.text)
}
module.exports = Suspended