docs: add "Streaming/deferred loaders" cookbook (QwikDev#5879)

packages/docs/src/routes/demo/cookbook/streaming-deferred-loaders/index.tsx

@@ -0,0 +1,27 @@
+import { Resource, component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+export const useMyData = routeLoader$(() => {
+  return async () => {
+    await delay(4_000);
+    return 'MyData ' + Math.random();
+  };
+});
+
+const delay = (timeout: number) => {
+  return new Promise((res) => setTimeout(res, timeout));
+};
+
+export default component$(() => {
+  const myData = useMyData();
+  return (
+    <>
+      <div>BEFORE</div>
+      <Resource
+        value={myData}
+        onResolved={(data) => <div>DATA: {data}</div>}
+      />
+      <div>AFTER</div>
+    </>
+  );
+});

packages/docs/src/routes/docs/cookbook/index.mdx

@@ -27,5 +27,6 @@ Examples:
 - [NavLink](./nav-link/)
 - [Portals](./portals/)
 - [Re-exporting loaders](./re-exporting-loaders/)
+- [Streaming/deferred loaders](./streaming-deferred-loaders)
 - [Synchronous Events with State](./sync-events/)
 - [Theme Management](./theme-management/)

packages/docs/src/routes/docs/cookbook/streaming-deferred-loaders/index.mdx

@@ -0,0 +1,49 @@
+---
+title: Cookbook | Streaming/deferred loaders
+contributors:
+  - gioboa
+updated_at: '2024-02-23T01:00:00Z'
+created_at: '2024-02-23T01:00:00Z'
+---
+
+import CodeSandbox, { CodeFile } from '../../../../components/code-sandbox/index.tsx';
+
+# Streaming/deferred loaders
+
+When you use `routeLoader$` the default behavior is to wait for it to complete before rendering our component(s).
+However, there is a way to render the DOM up to the point where `routeLoader$` is used and wait for it to complete.
+By returning an asynchronous function from our `routeLoader$` we can stream/defer the rendering to provide immediate visual feedback. 
+
+<CodeFile src="/src/routes/demo/cookbook/streaming-deferred-loaders/index.tsx" >
+```tsx
+import { Resource, component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+export const useMyData = routeLoader$(() => {
+  return async () => {
+    await delay(4_000);
+    return 'MyData ' + Math.random();
+  };
+});
+
+const delay = (timeout: number) => {
+  return new Promise((res) => setTimeout(res, timeout));
+};
+
+export default component$(() => {
+  const myData = useMyData();
+  return (
+    <>
+      <div>BEFORE</div>
+      <Resource
+        value={myData}
+        onResolved={(data) => <div>DATA: {data}</div>}
+      />
+      <div>AFTER</div>
+    </>
+  );
+});
+```
+</CodeFile>
+
+<CodeSandbox src="/src/routes/demo/cookbook/streaming-deferred-loaders/" />

packages/docs/src/routes/docs/menu.md

@@ -47,6 +47,7 @@
 - [Node Docker deploy](/docs/cookbook/node-docker-deploy/index.mdx)
 - [Portals](/docs/cookbook/portals/index.mdx)
 - [Re-exporting loaders](/docs/cookbook/re-exporting-loaders/index.mdx)
+- [Streaming loaders](/docs/cookbook/streaming-deferred-loaders/index.mdx)
 - [Sync events w state](/docs/cookbook/sync-events/index.mdx)
 - [Theme Managment](/docs/cookbook/theme-management/index.mdx)