```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 import {defer} from "@shopify/remix-oxygen";

export async function loader({ params: {handle}, context: {storefront} }) { const {product} = storefront.query({ query: #graphql query Product( $country: CountryCode, $language: LanguageCode, $handle: String! ) @inContext(country: $country, language: $language) product(handle: $handle) { id title }, variables: {handle}, cache: storefront.CacheLong() }); const {productRecommendations} = storefront.query({ query: #graphql query ProductRecommendations( $country: CountryCode, $language: LanguageCode, $handle: String! ) @inContext(country: $country, language: $language) productRecommendations(handle: $handle) { id title } }, variables: {handle} }); if (!product) { throw new Response('Not Found', { status: 404, }); } return defer({ product: await product, productRecommendations, }); } ```

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 const stream = useEventSource( `/items/${params.hash}/progress`, { event: "progress", }, )

js export async function loader({ request, params, }: LoaderArgs) { const hash = params.hash return eventStream(request.signal, function setup(send) { const interval = setInterval(() => { const file = fs.readFileSync( path.join("public", "items", `${hash}.json`), ) if (file.toString()) { const data = JSON.parse(file.toString()) const progress = data.progress send({ event: "progress", data: String(progress) }) if (progress === 100) { clearInterval(interval) } } }, 200) return function clear(timer: number) { clearInterval(interval) clearInterval(timer) } }) }

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 }) }), }) }

```js function makeDocument() { let frame = document.getElementById("theFrame");

let doc = document.implementation.createHTMLDocument("New Document"); let p = doc.createElement("p"); p.textContent = "This is a new paragraph.";

try { doc.body.appendChild(p); } catch (e) { console.log(e); }

// Copy the new HTML document into the frame

let destDocument = frame.contentDocument; let srcNode = doc.documentElement; let newNode = destDocument.importNode(srcNode, true);

destDocument.replaceChild(newNode, destDocument.documentElement); } ```

```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 import React, { lazy } from 'react';

const LazyLoad = lazy(() => import('./LazyLoad'));

const App = () => { return <LazyLoad />; }; ```

```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> ); ```

Use Follow TCP Stream to display HTTP response chunks

```http HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked

7\r\n Mozilla\r\n 11\r\n Developer Network\r\n 0\r\n \r\n ```

```abnf Transfer-Encoding: chunked Transfer-Encoding: compress Transfer-Encoding: deflate Transfer-Encoding: gzip

// Several values can be listed, separated by a comma Transfer-Encoding: gzip, chunked ```

```ts type ColorDSValue = "black100" | "black80" | "blue100" | "red150" // | etc type ColorOtherString = string & {}

type Color = ColorDSValue | ColorOtherString ```

ts const wow: ("hello" | "world") | (string & {}) // `wow` is of type `"hello"` or `"world"` or `string`.

---

```abnf content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | element( )

<content-replacement> = <image>

<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+

<counter> = <counter()> | <counters()>

<image> = <url> | <gradient>

<quote> = open-quote | close-quote | no-open-quote | no-close-quote

<target> = <target-counter()> | <target-counters()> | <target-text()>

<leader()> = leader( <leader-type> )

<counter()> = counter( <counter-name> , <counter-style>? )

<counters()> = counters( <counter-name> , <string> , <counter-style>? )

<url> = url( <string> <url-modifier> ) | src( <string> <url-modifier> )

<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )

<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )

<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )

<leader-type> = dotted | solid | space | <string>

<counter-style> = <counter-style-name> | <symbols()>

<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed <br /> ```