From c141a3f56a4a2524efdeae11d52a5d2e19a9246d Mon Sep 17 00:00:00 2001
From: tedraykov <tedraykov@gmail.com>
Date: Thu, 20 Jun 2024 14:45:11 +0300
Subject: [PATCH] add suspense and skeletons to order details

---
 app/account/orders/[id]/page.tsx | 24 ++++++++++++++++++------
 components/ui/skeleton.tsx       | 13 +++++++++++++
 lib/shopify/index.ts             | 20 +++++++++-----------
 3 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 components/ui/skeleton.tsx

diff --git a/app/account/orders/[id]/page.tsx b/app/account/orders/[id]/page.tsx
index d767ab5d7..da9f6e1ed 100644
--- a/app/account/orders/[id]/page.tsx
+++ b/app/account/orders/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { CheckCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon, TruckIcon, ArrowLeftIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { Button } from 'components/button';
 import { Card } from 'components/ui/card';
@@ -9,6 +9,9 @@ import { Fulfillment, Order } from 'lib/shopify/types';
 import Text from 'components/ui/text';
 import Price from 'components/price';
 import Badge from 'components/ui/badge';
+import Link from 'next/link';
+import { Suspense } from 'react';
+import Skeleton from 'components/ui/skeleton';
 
 export const runtime = 'edge';
 
@@ -204,7 +207,7 @@ function OrderDetails({ order }: { order: Order }) {
           </div>
           <div className="flex flex-col gap-2">
             <Label>Shipping Method</Label>
-            <Text>{order.shippingMethod.name}</Text>
+            <Text>{order.shippingMethod!.name}</Text>
           </div>
         </div>
         <div className="flex flex-1 flex-col gap-4">
@@ -305,9 +308,16 @@ export default async function OrderPage({ params }: { params: { id: string } })
   return (
     <main className="mx-auto max-w-6xl p-6">
       <div className="mb-6 flex justify-between">
-        <div>
-          <Heading as="h1">Order {order.name}</Heading>
-          <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
+        <div className="flex items-start gap-2">
+          <Link href="/account">
+            <ArrowLeftIcon className="mt-1 h-6 w-6" />
+          </Link>
+          <div>
+            <Suspense fallback={<Skeleton />}>
+              <Heading as="h1">Order {order.name}</Heading>
+            </Suspense>
+            <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
+          </div>
         </div>
         <div>
           <Button>Activate Warranty</Button>
@@ -315,7 +325,9 @@ export default async function OrderPage({ params }: { params: { id: string } })
       </div>
       <div className="flex items-start gap-6">
         <div className="flex flex-1 flex-col gap-6">
-          <Fulfillments order={order} />
+          <Suspense fallback={<Skeleton />}>
+            <Fulfillments order={order} />
+          </Suspense>
           <Unfulfilled order={order} />
           <OrderDetails order={order} />
         </div>
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 000000000..9ca32d04d
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { VariantProps, tv } from 'tailwind-variants';
+
+const skeleton = tv({
+  base: 'animate-pulse rounded bg-gray-100 w-full h-6'
+});
+
+interface SkeletonProps extends VariantProps<typeof skeleton> {
+  className?: string;
+}
+
+export default function Skeleton({ className }: SkeletonProps) {
+  return <div className={skeleton({ className })} />;
+}
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 3e1808256..6d5a46e33 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -349,12 +349,11 @@ const reshapeMetaobjects = (metaobjects: ShopifyMetaobject[]): Metaobject[] => {
         };
       },
       {} as {
-        [key: string]:
-          | {
-              value: string;
-              referenceId: string;
-            }
-          | string;
+        [key: string]: {
+          value: string;
+          referenceId: string;
+        };
+        string;
       }
     );
 
@@ -485,8 +484,8 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
           image: {
             url: lineItem.lineItem.image?.url || placeholderProductImage,
             altText: lineItem.lineItem.image?.altText || lineItem.lineItem.title,
-            width: 100,
-            height: 100
+            width: 62,
+            height: 62
           }
         })) || []
     })) || [];
@@ -514,8 +513,8 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
       image: {
         url: edge.node.image?.url || placeholderProductImage,
         altText: edge.node.image?.altText || edge.node.title,
-        width: edge.node.image?.width || 62,
-        height: edge.node.image?.height || 62
+        width: 62,
+        height: 62
       },
       price: reshapeMoney(edge.node.price),
       totalPrice: reshapeMoney(edge.node.totalPrice),
@@ -543,7 +542,6 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
   }
 
   if (shopifyOrder.shippingLine) {
-    console.log('Shipping Line', shopifyOrder.shippingLine);
     order.shippingMethod = {
       name: shopifyOrder.shippingLine?.title,
       price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)!