From ad85d11a8223a589803995c441125953e84d5573 Mon Sep 17 00:00:00 2001
From: nguyenlejoe <joe_le.1@hotmail.com>
Date: Wed, 13 Dec 2023 15:06:03 -0800
Subject: [PATCH] skeleton load

---
 .../NFTFloorPriceView/NFTFloorPriceView.tsx   |   2 +-
 .../NFTSalesCountView/NFTSalesCountView.tsx   |   4 +-
 .../NFTs/NFTDetailView/NFTDetailView.tsx      | 133 +++++++++++-------
 3 files changed, 84 insertions(+), 55 deletions(-)

diff --git a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
index c8d9f816..a993b234 100644
--- a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
+++ b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
@@ -104,7 +104,7 @@ export const NFTFloorPriceView: React.FC<NFTFloorPriceViewProps> = ({
     });
 
     return (
-        <div className="rounded border p-4">
+        <div className="rounded border p-4 min-h-[25rem] w-full">
             <div className="pb-4">
                 <TypographyH4>Floor Price</TypographyH4>
             </div>
diff --git a/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx
index 6cdf2a5f..77f753dd 100644
--- a/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx
+++ b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx
@@ -56,7 +56,7 @@ export const NFTSalesCountView: React.FC<NFTSalesCountViewProps> = ({
             return (
                 <div>
                     <BarChart
-                        className="mt-2 flex-grow p-2"
+                        className="mt-2 p-2"
                         data={result}
                         index="date"
                         categories={["Sale Count"]}
@@ -68,7 +68,7 @@ export const NFTSalesCountView: React.FC<NFTSalesCountViewProps> = ({
     });
 
     return (
-        <div className="rounded border p-4">
+        <div className="rounded border p-4 min-h-[20rem] w-full">
             <div className="pb-4">
                 <TypographyH4>Sales History</TypographyH4>
             </div>
diff --git a/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx
index 64355352..625bec97 100644
--- a/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx
+++ b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx
@@ -6,6 +6,8 @@ import { type Option, Some, None } from "@/utils/option";
 import { type NFTDetailViewProps } from "@/utils/types/organisms.types";
 import { type NftTokenContract } from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
 
 export const NFTDetailView: React.FC<NFTDetailViewProps> = ({
     chain_name,
@@ -28,64 +30,91 @@ export const NFTDetailView: React.FC<NFTDetailViewProps> = ({
         })();
     }, [chain_name, collection_address, token_id]);
 
-    return maybeResult.match({
-        None: () => <div>Loading...</div>,
-        Some: (result) => {
-            return (
-                <div className="w-full">
-                    <TypographyH1>
-                        {result.contract_name} #
-                        {result.nft_data.token_id?.toString()}{" "}
-                    </TypographyH1>
 
-                    <div className="mt-4 flex gap-4">
-                        <div className="max-w-[30rem] rounded border ">
-                            <img
-                                className="rounded-t"
-                                src={result.nft_data.external_data.image_512}
-                            />
+    return (
+        <div className="w-full">    
 
-                            <div className="mt-2 p-4">
-                                <TypographyH4>Attributes</TypographyH4>
+            {maybeResult.match({
+                None: () => <div className="flex gap-2">
+                    <Skeleton size={GRK_SIZES.LARGE}/> <Skeleton size={GRK_SIZES.LARGE}/>
+                </div>,
+                Some: (result) => {
+                    return <TypographyH1>
+                    {result.contract_name} #
+                    {result.nft_data.token_id?.toString()}{" "}
+                </TypographyH1>
+                },
+            })}
 
-                                <div className="mt-2 flex flex-wrap gap-4">
-                                    {result.nft_data.external_data?.attributes.map(
-                                        (attrs, i) => {
-                                            return (
-                                                <div
-                                                    key={i}
-                                                    className="rounded border bg-accent-foreground/30 p-2"
-                                                >
-                                                    <p className="text-muted-foreground">
-                                                        {attrs.trait_type}
-                                                    </p>
-                                                    <p>{attrs.value}</p>
-                                                </div>
-                                            );
-                                        }
-                                    )}
-                                </div>
-                            </div>
+
+            <div className="mt-4 flex gap-4">
+                {maybeResult.match({
+                    None: () => <div className="max-w-[30rem] rounded border ">
+                    <div className="animate-pulse rounded bg-accent-foreground w-[30rem] h-[30rem]"/>
+
+                    <div className="mt-2 p-4">
+                        <TypographyH4>Attributes</TypographyH4>
+
+                        <div className="mt-2 flex flex-wrap gap-4">
+                            {[1, 2, 3, 4, 5, 6, 7, 8].map((o, i) => {
+                                return (
+                                    <Skeleton
+                                        key={i}
+                                        size={GRK_SIZES.LARGE}
+                                    />
+                                );
+                            })}
                         </div>
-                        <div className=" flex w-full flex-col gap-4">
-                            <div className="">
-                                <NFTSalesCountView
-                                    chain_name={chain_name}
-                                    collection_address={collection_address}
-                                    token_id={token_id}
-                                />
-                            </div>
-                            <div className="">
-                                <NFTFloorPriceView
-                                    chain_name={chain_name}
-                                    collection_address={collection_address}
-                                    token_id={token_id}
-                                />
+                    </div>
+                </div>,
+                    Some: (result) => {
+                        return <div className="max-w-[30rem] rounded border ">
+                        <img
+                            className="rounded-t"
+                            src={result.nft_data.external_data.image_512}
+                        />
+    
+                        <div className="mt-2 p-4">
+                            <TypographyH4>Attributes</TypographyH4>
+    
+                            <div className="mt-2 flex flex-wrap gap-4">
+                                {result.nft_data.external_data?.attributes.map(
+                                    (attrs, i) => {
+                                        return (
+                                            <div
+                                                key={i}
+                                                className="rounded border bg-accent-foreground/30 p-2"
+                                            >
+                                                <p className="text-muted-foreground">
+                                                    {attrs.trait_type}
+                                                </p>
+                                                <p>{attrs.value}</p>
+                                            </div>
+                                        );
+                                    }
+                                )}
                             </div>
                         </div>
                     </div>
+                    },
+                })}
+                <div className=" flex w-full flex-col gap-4">
+                    <div className="">
+                        <NFTSalesCountView
+                            chain_name={chain_name}
+                            collection_address={collection_address}
+                            token_id={token_id}
+                        />
+                    </div>
+                    <div className="">
+                        <NFTFloorPriceView
+                            chain_name={chain_name}
+                            collection_address={collection_address}
+                            token_id={token_id}
+                        />
+                    </div>
                 </div>
-            );
-        },
-    });
+            </div>
+        </div>
+    );
 };