15 |
22 | )
23 | }
24 |
25 | // 🐨 create a new ship variable that's a Ship
26 | // 💰 let ship: Ship
27 | // 🐨 rename this to shipPromise and remove the `await`
28 | // 🐨 add a .then on the shipPromise that assigns the ship to the resolved value
29 | const ship = await getShip(shipName)
30 |
31 | function ShipDetails() {
32 | // 🐨 if the ship hasn't loaded yet, throw the shipPromise
33 |
34 | return (
35 |
16 |
21 |
17 | {/* 🐨 add a Suspense component here with the fallback set to
20 |
36 |
43 |
50 |
51 | {ship.weapons.length ? (
52 |
66 | {ship.fetchedAt}
67 |
68 | )
69 | }
70 |
71 | function ShipFallback() {
72 | return (
73 |
37 | 
41 |
42 | 44 | {ship.name} 45 | 46 | {ship.topSpeed} lyh 47 | 48 |
49 |-
53 | {ship.weapons.map((weapon) => (
54 |
- 55 | :{' '} 56 | 57 | {weapon.damage} ({weapon.type}) 58 | 59 | 60 | ))} 61 |
NOTE: This ship is not equipped with any weapons.
64 | )} 65 |
74 |
78 |
85 |
86 |
97 |
98 | )
99 | }
100 |
101 | const rootEl = document.createElement('div')
102 | document.body.append(rootEl)
103 | ReactDOM.createRoot(rootEl).render(
75 | 
76 |
77 |
76 | 79 | {shipName} 80 | 81 | XX lyh 82 | 83 |
84 |-
87 | {Array.from({ length: 3 }).map((_, i) => (
88 |
- 89 | :{' '} 90 | 91 | XX (loading) 92 | 93 | 94 | ))} 95 |
10 |
18 | )
19 | }
20 |
21 | let ship: Ship
22 | const shipPromise = getShip(shipName, 1000).then((result) => (ship = result))
23 |
24 | function ShipDetails() {
25 | if (!ship) throw shipPromise
26 |
27 | return (
28 |
11 |
17 |
12 |
16 |
29 |
36 |
43 |
44 | {ship.weapons.length ? (
45 |
59 | {ship.fetchedAt}
60 |
61 | )
62 | }
63 |
64 | function ShipFallback() {
65 | return (
66 |
30 |
34 |
35 | 37 | {ship.name} 38 | 39 | {ship.topSpeed} lyh 40 | 41 |
42 |-
46 | {ship.weapons.map((weapon) => (
47 |
- 48 | :{' '} 49 | 50 | {weapon.damage} ({weapon.type}) 51 | 52 | 53 | ))} 54 |
NOTE: This ship is not equipped with any weapons.
57 | )} 58 |
67 |
71 |
78 |
79 |
90 |
91 | )
92 | }
93 |
94 | const rootEl = document.createElement('div')
95 | document.body.append(rootEl)
96 | ReactDOM.createRoot(rootEl).render(
68 |
69 |
70 |
69 | 72 | {shipName} 73 | 74 | XX lyh 75 | 76 |
77 |-
80 | {Array.from({ length: 3 }).map((_, i) => (
81 |
- 82 | :{' '} 83 | 84 | XX (loading) 85 | 86 | 87 | ))} 88 |
11 |
21 | )
22 | }
23 |
24 | let ship: Ship
25 | let error: unknown
26 | const shipPromise = getShip(shipName).then(
27 | (result) => (ship = result),
28 | (err) => (error = err),
29 | )
30 |
31 | function ShipDetails() {
32 | if (error) throw error
33 | if (!ship) throw shipPromise
34 |
35 | return (
36 |
12 |
20 |
13 |
19 |
37 |
44 |
51 |
52 | {ship.weapons.length ? (
53 |
67 | {ship.fetchedAt}
68 |
69 | )
70 | }
71 |
72 | function ShipFallback() {
73 | return (
74 |
38 |
42 |
43 | 45 | {ship.name} 46 | 47 | {ship.topSpeed} lyh 48 | 49 |
50 |-
54 | {ship.weapons.map((weapon) => (
55 |
- 56 | :{' '} 57 | 58 | {weapon.damage} ({weapon.type}) 59 | 60 | 61 | ))} 62 |
NOTE: This ship is not equipped with any weapons.
65 | )} 66 |
75 |
79 |
86 |
87 |
98 |
99 | )
100 | }
101 |
102 | function ShipError() {
103 | return (
104 |
76 |
77 |
78 |
77 | 80 | {shipName} 81 | 82 | XX lyh 83 | 84 |
85 |-
88 | {Array.from({ length: 3 }).map((_, i) => (
89 |
- 90 | :{' '} 91 | 92 | XX (loading) 93 | 94 | 95 | ))} 96 |
105 |
109 |
111 | There was an error loading "{shipName}"
112 |
113 | )
114 | }
115 |
116 | const rootEl = document.createElement('div')
117 | document.body.append(rootEl)
118 | ReactDOM.createRoot(rootEl).render(
106 | 
107 |
108 |
107 | There was an error
110 |
13 |
23 | )
24 | }
25 |
26 | let ship: Ship
27 | let error: unknown
28 | let status: 'pending' | 'rejected' | 'fulfilled' = 'pending'
29 | const shipPromise = getShip(shipName).then(
30 | (result) => {
31 | ship = result
32 | status = 'fulfilled'
33 | },
34 | (err) => {
35 | error = err
36 | status = 'rejected'
37 | },
38 | )
39 |
40 | function ShipDetails() {
41 | if (status === 'rejected') throw error
42 | if (status === 'pending') throw shipPromise
43 |
44 | return (
45 |
14 |
22 |
15 |
21 |
46 |
53 |
60 |
61 | {ship.weapons.length ? (
62 |
76 | {ship.fetchedAt}
77 |
78 | )
79 | }
80 |
81 | function ShipFallback() {
82 | return (
83 |
47 |
51 |
52 | 54 | {ship.name} 55 | 56 | {ship.topSpeed} lyh 57 | 58 |
59 |-
63 | {ship.weapons.map((weapon) => (
64 |
- 65 | :{' '} 66 | 67 | {weapon.damage} ({weapon.type}) 68 | 69 | 70 | ))} 71 |
NOTE: This ship is not equipped with any weapons.
74 | )} 75 |
84 |
88 |
95 |
96 |
107 |
108 | )
109 | }
110 |
111 | function ShipError() {
112 | return (
113 |
85 |
86 |
87 |
86 | 89 | {shipName} 90 | 91 | XX lyh 92 | 93 |
94 |-
97 | {Array.from({ length: 3 }).map((_, i) => (
98 |
- 99 | :{' '} 100 | 101 | XX (loading) 102 | 103 | 104 | ))} 105 |
114 |
118 |
120 | There was an error loading "{shipName}"
121 |
122 | )
123 | }
124 |
125 | const rootEl = document.createElement('div')
126 | document.body.append(rootEl)
127 | ReactDOM.createRoot(rootEl).render(
115 |
116 |
117 |
116 | There was an error
119 |
13 |
23 | )
24 | }
25 |
26 | const shipPromise = getShip(shipName)
27 |
28 | function ShipDetails() {
29 | const ship = use(shipPromise)
30 | return (
31 |
14 |
22 |
15 |
21 |
32 |
39 |
46 |
47 | {ship.weapons.length ? (
48 |
62 | {ship.fetchedAt}
63 |
64 | )
65 | }
66 |
67 | function ShipFallback() {
68 | return (
69 |
33 |
37 |
38 | 40 | {ship.name} 41 | 42 | {ship.topSpeed} lyh 43 | 44 |
45 |-
49 | {ship.weapons.map((weapon) => (
50 |
- 51 | :{' '} 52 | 53 | {weapon.damage} ({weapon.type}) 54 | 55 | 56 | ))} 57 |
NOTE: This ship is not equipped with any weapons.
60 | )} 61 |
70 |
74 |
81 |
82 |
93 |
94 | )
95 | }
96 |
97 | function ShipError() {
98 | return (
99 |
71 |
72 |
73 |
72 | 75 | {shipName} 76 | 77 | XX lyh 78 | 79 |
80 |-
83 | {Array.from({ length: 3 }).map((_, i) => (
84 |
- 85 | :{' '} 86 | 87 | XX (loading) 88 | 89 | 90 | ))} 91 |
100 |
104 |
106 | There was an error loading "{shipName}"
107 |
108 | )
109 | }
110 |
111 | const rootEl = document.createElement('div')
112 | document.body.append(rootEl)
113 | ReactDOM.createRoot(rootEl).render(
101 |
102 |
103 |
102 |