Create deployment

templates/skeleton/app/lib/timeout.ts

@@ -0,0 +1,36 @@
+const defaultNetworkTimeoutTime = 5000; // ms
+
+export type PromiseWithTimeoutProps<T> = {
+  promise: Promise<T>;
+  timeout?: number;
+  errorCallback?: (error: string) => void;
+};
+
+export const promiseWithTimeout = <T>({
+  promise,
+  timeout = defaultNetworkTimeoutTime,
+  errorCallback,
+}: PromiseWithTimeoutProps<T>): Promise<T> => {
+  let timer: NodeJS.Timeout;
+
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) => {
+      timer = setTimeout(() => {
+        console.log('a');
+        reject(new Error('Request timed out'));
+      }, timeout);
+    }),
+  ])
+    .then((data) => {
+      console.log('b');
+      clearTimeout(timer);
+      return data;
+    })
+    .catch((error) => {
+      console.log('c');
+      clearTimeout(timer);
+      errorCallback && errorCallback(error);
+      return new Promise<T>((_, reject) => reject(error));
+    });
+};

templates/skeleton/app/routes/products.$handle.tsx

@@ -12,6 +12,7 @@ import {getVariantUrl} from '~/lib/variants';
 import {ProductPrice} from '~/components/ProductPrice';
 import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
+import {promiseWithTimeout} from '~/lib/timeout';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
@@ -43,6 +44,12 @@ async function loadCriticalData({
     throw new Error('Expected product handle to be defined');
   }
 
+  console.log('wow');
+
+  await promiseWithTimeout({
+    promise: new Promise((resolve) => setTimeout(resolve, 6000)),
+  });
+
   const [{product}] = await Promise.all([
     storefront.query(PRODUCT_QUERY, {
       variables: {handle, selectedOptions: getSelectedProductOptions(request)},