Add loading state (#458)

pages/wishlist.tsx

@@ -2,10 +2,11 @@ import type { GetStaticPropsContext } from 'next'
 import commerce from '@lib/api/commerce'
 import { Heart } from '@components/icons'
 import { Layout } from '@components/common'
-import { Text, Container } from '@components/ui'
+import { Text, Container, Skeleton } from '@components/ui'
 import { useCustomer } from '@framework/customer'
 import { WishlistCard } from '@components/wishlist'
 import useWishlist from '@framework/wishlist/use-wishlist'
+import rangeMap from '@lib/range-map'
 
 export async function getStaticProps({
   preview,
@@ -43,7 +44,15 @@ export default function Wishlist() {
       <div className="mt-3 mb-20">
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
-          {isLoading || isEmpty ? (
+          {isLoading ? (
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {rangeMap(12, (i) => (
+                <Skeleton key={i}>
+                  <div className="w-60 h-60" />
+                </Skeleton>
+              ))}
+            </div>
+          ) : isEmpty ? (
             <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
               <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
                 <Heart className="absolute" />
@@ -56,11 +65,13 @@ export default function Wishlist() {
               </p>
             </div>
           ) : (
-            data &&
-            // @ts-ignore Shopify - Fix this types
-            data.items?.map((item) => (
-              <WishlistCard key={item.id} product={item.product! as any} />
-            ))
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {data &&
+                // @ts-ignore Shopify - Fix this types
+                data.items?.map((item) => (
+                  <WishlistCard key={item.id} product={item.product! as any} />
+                ))}
+            </div>
           )}
         </div>
       </div>