add preloading to account's pages

app/account/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div className="mx-auto max-w-screen-2xl">{children}</div>;
+}

app/account/loading.tsx

@@ -0,0 +1,34 @@
+import Divider from 'components/divider';
+import Heading from 'components/ui/heading';
+import Skeleton from 'components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="p-6">
+      <Heading className="pb-4" as="h1">
+        Orders
+      </Heading>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="flex w-full flex-col rounded border bg-white p-6">
+          <div className="flex flex-col gap-4">
+            <div>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-20 w-20 flex-none" />
+                <Skeleton />
+              </div>
+            </div>
+          </div>
+          <Divider />
+          <div className="flex flex-col gap-4">
+            <div>
+              <Skeleton className="mb-2 h-5 w-14" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <Skeleton className="w-20" />
+          </div>
+          <Skeleton className="mt-4 h-11" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/account/orders/[id]/loading.tsx

@@ -0,0 +1,29 @@
+import Skeleton from 'components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <div className="mb-6 flex justify-between">
+        <div className="flex items-start gap-2">
+          <Skeleton className="mt-1 h-6 w-6" />
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-8 w-32" />
+            <Skeleton className="h-4 w-36" />
+          </div>
+        </div>
+        <div>
+          <Skeleton className="h-9 w-32" />
+        </div>
+      </div>
+      <div className="flex items-start gap-6">
+        <div className="flex flex-1 flex-col gap-6">
+          <Skeleton className="h-72" />
+          <Skeleton className="h-72" />
+        </div>
+        <div className="hidden md:block md:basis-5/12">
+          <Skeleton className="h-80" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/account/orders/[id]/page.tsx

@@ -10,8 +10,9 @@ import Text from 'components/ui/text';
 import Price from 'components/price';
 import Badge from 'components/ui/badge';
 import Link from 'next/link';
+import OrderSummaryMobile from 'components/account/orders/order-summary-mobile';
 import { Suspense } from 'react';
-import Skeleton from 'components/ui/skeleton';
+import OrderSummary from 'components/account/orders/order-summary';
 
 export const runtime = 'edge';
 
@@ -236,105 +237,40 @@ function OrderDetails({ order }: { order: Order }) {
   );
 }
 
-function OrderSummary({ order }: { order: Order }) {
-  return (
-    <div className="flex flex-col gap-6">
-      <Heading size="sm">Order Summary</Heading>
-      <div className="flex flex-col gap-6">
-        {order.lineItems.map((lineItem, index) => (
-          <div key={index} className="flex items-center gap-4">
-            <Badge content={lineItem.quantity!}>
-              <Image
-                src={lineItem.image.url}
-                alt={lineItem.image.altText}
-                width={lineItem.image.width}
-                height={lineItem.image.height}
-                className="rounded border"
-              />
-            </Badge>
-            <div className="flex flex-col gap-2">
-              <Text>{lineItem.title}</Text>
-              <Label>{lineItem.sku}</Label>
-            </div>
-            <Price
-              className="text-sm"
-              amount={lineItem.price!.amount}
-              currencyCode={lineItem.price!.currencyCode}
-            />
-          </div>
-        ))}
-      </div>
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col">
-          <div className="flex items-center justify-between">
-            <Text>Subtotal</Text>
-            <Price
-              className="text-sm font-semibold"
-              amount={order.totalPrice!.amount}
-              currencyCode={order.totalPrice!.currencyCode}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <Text>Shipping</Text>
-            {order.shippingMethod?.price.amount !== '0.0' ? (
-              <Price
-                className="text-sm font-semibold"
-                amount={order.shippingMethod!.price.amount}
-                currencyCode={order.shippingMethod!.price.currencyCode}
-              />
-            ) : (
-              <Text className="font-semibold">Free</Text>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <Heading as="span" size="sm">
-            Total
-          </Heading>
-          <Price
-            className="font-semibold"
-            amount={order.totalPrice!.amount}
-            currencyCode={order.totalPrice!.currencyCode}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export default async function OrderPage({ params }: { params: { id: string } }) {
   const order = await getCustomerOrder(params.id);
 
   return (
-    <main className="mx-auto max-w-6xl p-6">
-      <div className="mb-6 flex justify-between">
-        <div className="flex items-start gap-2">
-          <Link href="/account">
-            <ArrowLeftIcon className="mt-1 h-6 w-6" />
-          </Link>
-          <div>
-            <Suspense fallback={<Skeleton />}>
+    <>
+      <Suspense>
+        <OrderSummaryMobile order={order} />
+      </Suspense>
+      <div className="mx-auto max-w-6xl p-6">
+        <div className="mb-6 flex justify-between">
+          <div className="flex items-start gap-2">
+            <Link href="/account">
+              <ArrowLeftIcon className="mt-1 h-6 w-6" />
+            </Link>
+            <div>
               <Heading as="h1">Order {order.name}</Heading>
-            </Suspense>
-            <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
+              <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
+            </div>
+          </div>
+          <div>
+            <Button>Activate Warranty</Button>
           </div>
         </div>
-        <div>
-          <Button>Activate Warranty</Button>
-        </div>
-      </div>
-      <div className="flex items-start gap-6">
-        <div className="flex flex-1 flex-col gap-6">
-          <Suspense fallback={<Skeleton />}>
+        <div className="flex items-start gap-6">
+          <div className="flex flex-1 flex-col gap-6">
             <Fulfillments order={order} />
-          </Suspense>
-          <Unfulfilled order={order} />
-          <OrderDetails order={order} />
+            <Unfulfilled order={order} />
+            <OrderDetails order={order} />
+          </div>
+          <Card className="hidden lg:block lg:basis-5/12">
+            <OrderSummary order={order} />
+          </Card>
         </div>
-        <Card className="hidden md:block md:basis-5/12">
-          <OrderSummary order={order} />
-        </Card>
       </div>
-    </main>
+    </>
   );
 }

app/account/page.tsx

@@ -1,104 +1,71 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { getCustomerOrders } from 'lib/shopify';
+import Text from 'components/ui/text';
 import Price from 'components/price';
 import Divider from 'components/divider';
 import { Button } from 'components/button';
+import Heading from 'components/ui/heading';
+import Label from 'components/ui/label';
+import Badge from 'components/ui/badge';
+import { Card } from 'components/ui/card';
 
 export const runtime = 'edge';
 
 export default async function AccountPage() {
-  // if (!access) {
-  //   redirect('/logout');
-  // }
-  // if (access === 'denied') {
-  //   redirect('/logout');
-  // }
-  //
-  // const customerAccessToken = access;
-  //
-  // //this is needed b/c of strange way server components handle redirects etc.
-  // //see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#redirecting
-  // //can only redirect outside of try/catch!
-  // let success = true;
-  // let errorMessage;
-  // let customerData;
-  // let orders;
-  //
-  // try {
-  //   const responseCustomerDetails = await shopifyCustomerFetch<CustomerDetailsData>({
-  //     customerToken: customerAccessToken,
-  //     query: CUSTOMER_DETAILS_QUERY,
-  //     tags: [TAGS.customer]
-  //   });
-  //   const userDetails = responseCustomerDetails.body;
-  //   if (!userDetails) {
-  //     throw new Error('Error getting actual user data Account page.');
-  //   }
-  //   customerData = userDetails?.data?.customer;
-  //   orders = customerData?.orders?.edges;
-  //   //console.log ("Details",orders)
-  // } catch (e) {
-  //   //they don't recognize this error in TS!
-  //   //@ts-ignore
-  //   errorMessage = e?.error?.toString() ?? 'Unknown Error';
-  //   console.log('error customer fetch account', e);
-  //   if (errorMessage !== 'unauthorized') {
-  //     throw new Error('Error getting actual user data Account page.');
-  //   } else {
-  //     console.log('Unauthorized access. Set to false and redirect');
-  //     success = false;
-  //   }
-  // }
-  // if (!success && errorMessage === 'unauthorized') redirect('/logout');
-  // // revalidateTag('posts') // Update cached posts //FIX
   const orders = await getCustomerOrders();
 
   return (
-    <div className="mx-auto mt-4 max-w-screen-2xl px-4">
-      <h3 className="pb-4 text-2xl font-bold">Orders</h3>
-      {orders.map((order, index) => (
-        <div className="relative" key={index}>
-          <Link
-            className="absolute left-0 top-0 h-full w-full"
-            href={`/account/orders/${order.id}`}
-          ></Link>
-          <div className="flex w-full flex-col rounded border bg-white p-6 md:w-fit">
-            <div className="flex flex-col gap-2">
-              {order.lineItems.slice(0, 2).map((lineItem, index) => (
-                <div key={index}>
-                  <div className="flex gap-2">
-                    <Image
-                      src={lineItem?.image?.url}
-                      alt={lineItem?.image?.altText}
-                      width={80}
-                      height={80}
-                    />
-                    <div>
-                      <p>{lineItem.title}</p>
+    <div className="p-6">
+      <Heading className="pb-4" as="h1">
+        Orders
+      </Heading>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {orders.map((order, index) => (
+          <div className="relative" key={index}>
+            <Link
+              className="peer absolute left-0 top-0 h-full w-full"
+              href={`/account/orders/${order.id}`}
+            />
+            <Card className="flex h-full flex-col transition-shadow peer-hover:shadow-lg peer-active:shadow-lg">
+              <div className="flex flex-col gap-4">
+                {order.lineItems.map((lineItem, index) => (
+                  <div key={index}>
+                    <div className="flex items-center gap-2">
+                      <Badge content={lineItem.quantity!}>
+                        <Image
+                          src={lineItem?.image?.url}
+                          alt={lineItem?.image?.altText}
+                          width={80}
+                          height={80}
+                          className="rounded border"
+                        />
+                      </Badge>
+                      <Text>{lineItem.title}</Text>
                     </div>
                   </div>
-                  <Divider />
-                </div>
-              ))}
-            </div>
-            <div className="flex flex-col gap-4">
-              <div>
-                <p className="font-bold">
-                  {order.lineItems.length} item{order.lineItems.length > 1 && 's'}
-                </p>
-                <p className="text-gray-500">Order {order.name}</p>
+                ))}
               </div>
-              <Price
-                className="text-lg font-medium text-gray-900"
-                amount={order.totalPrice!.amount}
-                currencyCode={order.totalPrice!.currencyCode}
-              />
-            </div>
-            <Button size="lg">Activate Warranty</Button>
+              <Divider />
+              <div className="flex flex-1 flex-col justify-end gap-4">
+                <div>
+                  <Text>
+                    {order.lineItems.length} item{order.lineItems.length > 1 && 's'}
+                  </Text>
+                  <Label>Order {order.name}</Label>
+                </div>
+                <Price
+                  amount={order.totalPrice!.amount}
+                  currencyCode={order.totalPrice!.currencyCode}
+                />
+              </div>
+              <Button size="lg" className="mt-4">
+                Activate Warranty
+              </Button>
+            </Card>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }