Skip to content

Commit

Permalink
skeleton load
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenlejoe
nguyenlejoe committed Dec 13, 2023
1 parent a1fb12b commit ad85d11
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 55 deletions.
2 changes: 1 addition & 1 deletion src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]}
Expand All @@ -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>
Expand Down
133 changes: 81 additions & 52 deletions src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
);
};

0 comments on commit ad85d11

Please sign in to comment.