Normalize the delay to be controlled by the initial function invocation (#23)

* Normalize the delay to be controlled by the initial function invocation

* Handle postpone

Author: cramforce

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

components/pricing.tsx

@@ -8,7 +8,7 @@ import { ProductUsedPrice } from '#/components/product-used-price';
 import { dinero, type DineroSnapshot } from 'dinero.js';
 import { Suspense } from 'react';
 import { AddToCart } from '#/components/add-to-cart';
-import { delayShippingEstimate } from '#/lib/constants';
+import { delayShippingEstimate, withDelay } from '#/lib/delay';
 import { cookies } from 'next/headers';
 
 async function AddToCartFromCookies() {
@@ -37,13 +37,16 @@ function LoadingDots() {
 }
 
 async function UserSpecificDetails({ productId }: { productId: string }) {
-  const data = await fetch(
-    `https://app-router-api.vercel.app/api/products?id=${productId}&delay=${delayShippingEstimate}&filter=price,usedPrice,leadTime,stock`,
-    {
-      // We intentionally disable Next.js Cache to better demo
-      // streaming
-      cache: 'no-store',
-    },
+  const data = await withDelay(
+    fetch(
+      `https://app-router-api.vercel.app/api/products?id=${productId}&filter=price,usedPrice,leadTime,stock`,
+      {
+        // We intentionally disable Next.js Cache to better demo
+        // streaming
+        cache: 'no-store',
+      }
+    ),
+    delayShippingEstimate
   );
 
   const product = (await data.json()) as Product;

components/recommended-products.tsx

@@ -1,20 +1,23 @@
 import { Product } from '#/types/product';
 import { ProductCard } from '#/components/product-card';
 import { headers } from 'next/headers';
-import { delayRecommendedProducts } from '#/lib/constants';
+import { delayRecommendedProducts, withDelay } from '#/lib/delay';
 
 export async function RecommendedProducts() {
   headers();
-  let products: Product[] = await fetch(
-    // We intentionally delay the response to simulate a slow data
-    // request that would benefit from streaming
-    `https://app-router-api.vercel.app/api/products?delay=${delayRecommendedProducts}&filter=1`,
-    {
-      // We intentionally disable Next.js Cache to better demo
-      // streaming
-      cache: 'no-store',
-    },
-  ).then((res) => res.json());
+  let products: Product[] = await withDelay(
+    fetch(
+      // We intentionally delay the response to simulate a slow data
+      // request that would benefit from streaming
+      `https://app-router-api.vercel.app/api/products?filter=1`,
+      {
+        // We intentionally disable Next.js Cache to better demo
+        // streaming
+        cache: 'no-store',
+      }
+    ).then((res) => res.json()),
+    delayRecommendedProducts
+  );
 
   return (
     <div className="space-y-6" data-headers={headers()}>

components/reviews.tsx

@@ -1,19 +1,22 @@
 import type { Review } from '#/types/review';
 import { ProductReviewCard } from '#/components/product-review-card';
 import { headers } from 'next/headers';
-import { delayReviews } from '#/lib/constants';
+import { delayReviews, withDelay } from '#/lib/delay';
 
 export async function Reviews() {
-  let reviews: Review[] = await fetch(
-    // We intentionally delay the response to simulate a slow data
-    // request that would benefit from streaming
-    `https://app-router-api.vercel.app/api/reviews?delay=${delayReviews}`,
-    {
-      // We intentionally disable Next.js Cache to better demo
-      // streaming
-      cache: 'no-store',
-    },
-  ).then((res) => res.json());
+  let reviews: Review[] = await withDelay(
+    fetch(
+      // We intentionally delay the response to simulate a slow data
+      // request that would benefit from streaming
+      `https://app-router-api.vercel.app/api/reviews`,
+      {
+        // We intentionally disable Next.js Cache to better demo
+        // streaming
+        cache: 'no-store',
+      }
+    ).then((res) => res.json()),
+    delayReviews
+  );
 
   return (
     <div className="space-y-6" data-headers={headers()}>

components/sidebar.tsx

@@ -10,7 +10,7 @@ import {
   delayRecommendedProducts,
   delayReviews,
   delayShippingEstimate,
-} from '#/lib/constants';
+} from '#/lib/delay';
 
 export function Sidebar() {
   const [isOpen, setIsOpen] = useState(false);

lib/constants.ts

@@ -0,0 +1,17 @@
+// Times are in milliseconds
+export const delayShippingEstimate = 200;
+export const delayRecommendedProducts = 500;
+export const delayReviews = 600;
+
+export async function withDelay<T>(
+  promise: Promise<T>,
+  delay: number
+): Promise<T> {
+  // Ensure we throw if this throws
+  const ret = await promise;
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(ret);
+    }, delay);
+  });
+}