```js

export const loader = async () => {

// fire them all at once<br /> const critical1Promise = fetch('/test?text=critical1&delay=250').then(res => res.json()); const critical2Promise = fetch('/test?text=critical2&delay=500').then(res => res.json()); const lazyResolvedPromise = fetch('/test?text=lazyResolved&delay=100').then(res => res.json()); const lazy1Promise = fetch('/test?text=lazy1&delay=500').then(res => res.json()); const lazy2Promise = fetch('/test?text=lazy2&delay=1500').then(res => res.json()); const lazy3Promise = fetch('/test?text=lazy3&delay=2500').then(res => res.json()); const lazyErrorPromise = fetch('/test?text=lazy3&delay=3000').then(res => { throw Error('Oh noo!') });

// await for the response return defer({ critical1: await critical1Promise, critical2: await critical2Promise, lazyResolved: lazyResolvedPromise, lazy1: lazy1Promise, lazy2: lazy2Promise, lazy3: lazy3Promise, lazyError: lazyErrorPromise }) } ```

js export default function Index() { const data = useLoaderData() const params = useParams() const stream = useEventSource( `/items/${params.hash}/progress`, { event: "progress", }, ) return ( <div> <Suspense fallback={<span> {stream}% </span>}> <Await resolve={data.promise} errorElement={<p>Error loading img!</p>} > {(promise) => <img alt="" src={promise.img} />} </Await> </Suspense> </div> ) }

js export async function loader({ params }: LoaderArgs) { if (!params.hash) return redirect("/") const pathname = path.join( "public", "items", `${params.hash}.json`, ) const file = fs.readFileSync(pathname) if (!file) return redirect("/") const item = JSON.parse(file.toString()) if (!item) return redirect("/") if (item.progress === 100) { return defer({ promise: item, }) } return defer({ promise: new Promise((resolve) => { const interval = setInterval(() => { const file = fs.readFileSync(pathname) if (!file) return const item = JSON.parse(file.toString()) if (!item) return if (item.progress === 100) { clearInterval(interval) resolve(item) } return }) }), }) }

```html

<div>Hi</div>

<React.SuspenseList revealOrder="forwards"> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource1} /> </React.Suspense> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource2} /> </React.Suspense> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource3} /> </React.Suspense> </React.SuspenseList> ```

We can see that the revealing order is kept, from top to bottom, even though the 2nd promise if fulfilled sooner.

js const HeavyComponent = lazy(() => import(/* webpackChunkName: "HeavyComponent" */ './HeavyComponent');

js const LazyLoad = lazy(() => import(/* webpackChunkName: 'lazyload' */ './LazyLoad') );

```js const PrefetchLoad = lazy(() => import( / webpackPrefetch: true / './PrefetchLoad' ) );

const App = () => { return ( <Suspense fallback="Loading"> {condition && <PrefetchLoad />} </Suspense> ); }; ```

js const App = () => { return ( <Suspense fallback="Loading"> <LazyLoad /> </Suspense> ); };

```js

const CatAvatar = React.lazy(() => import('./path/to/cat/avatar')); const ThorAvatar = React.lazy(() => import('./path/to/cat/thor-avatar'));

const AppContainer = () => ( <React.Suspense fallback="loading..."> <CatAvatar /> <ThorAvatar /> </React.Suspense> ); ```

linked from https://github.com/sveltejs/svelte/issues/3203#issuecomment-799749889

This is the third time that Sergeant Cuff is saying “Wait a little” to Betteredge. This phrase, although creating an aura of mystery/suspense, reminds me of the request at the beginning of the novel to the family to suspend judgment until the story is over (and thus maybe is a reminder to the reader?). However, the phrase is also kind of funny to me because at this point, “wait[ing] a little” to the audience really has the opposite effect, despite the suspense the phrase creates: instead of putting down the book and literally waiting, we actually want to keep reading. This makes me think that there might be an interesting way to measure suspense in literature (this one being some kind of technique through reverse psychology?)

inspiredBy: https://github.com/CharlesStover/fetch-suspense