OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

add skeletons for item page header

Browse source 
It looks nice, but also particularly means we can handle the loading for the preview separately, get that started faster and iterate better on it in dev!
This commit is contained in:
Emi Matchu 2020-09-12 18:13:11 -07:00
parent bf2660cbd4
commit d29abf5cd1
2 changed files with 57 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/app/ItemPage.js
View file

@ -3,7 +3,7 @@ import {
AspectRatio, AspectRatio,
Badge, Badge,
Box, Box,
Center, Skeleton,
VStack, VStack,
useColorModeValue, useColorModeValue,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
@ -25,6 +25,15 @@ import OutfitPreview from "./components/OutfitPreview";
function ItemPage() { function ItemPage() {
const { itemId } = useParams(); const { itemId } = useParams();
return (
<VStack spacing="6">
<ItemPageHeader itemId={itemId} />
<ItemPageOutfitPreview itemId={itemId} />
</VStack>
);
}
function ItemPageHeader({ itemId }) {
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
gql` gql`
query ItemPage($itemId: ID!) { query ItemPage($itemId: ID!) {
@ -43,9 +52,41 @@ function ItemPage() {
if (loading) { if (loading) {
return ( return (
<Center> <Box
<HangerSpinner /> display="flex"
</Center> alignItems="center"
justifyContent="flex-start"
width="100%"
>
<Skeleton height="80px" width="80px" marginRight="4" flex="0 0 auto" />
<Box display="flex" flexDirection="column" alignItems="flex-start">
<Skeleton>
<Heading1 lineHeight="1.1" maxHeight="1.1em">
Item name goes here
</Heading1>
</Skeleton>
<ItemBadgeList>
<Skeleton>
<NpBadge />
</Skeleton>
<Skeleton>
<LinkBadge href="/">Jellyneo</LinkBadge>
</Skeleton>
<Skeleton>
<LinkBadge href="/">Shop Wiz</LinkBadge>
</Skeleton>
<Skeleton>
<LinkBadge href="/">Super Wiz</LinkBadge>
</Skeleton>
<Skeleton>
<LinkBadge href="/">Trades</LinkBadge>
</Skeleton>
<Skeleton>
<LinkBadge href="/">Auctions</LinkBadge>
</Skeleton>
</ItemBadgeList>
</Box>
</Box>
); );
} }
@ -56,16 +97,12 @@ function ItemPage() {
const { item } = data; const { item } = data;
return ( return (
<VStack spacing="6"> <Box
<ItemPageHeader item={item} /> display="flex"
<ItemPageOutfitPreview itemId={itemId} /> alignItems="center"
</VStack> justifyContent="flex-start"
); width="100%"
} >
function ItemPageHeader({ item }) {
return (
<Box display="flex" alignItems="center">
<ItemThumbnail <ItemThumbnail
item={item} item={item}
size="lg" size="lg"

8
src/app/components/ItemCard.js
View file

@ -220,15 +220,19 @@ export function ItemBadgeTooltip({ label, children }) {
export function NcBadge() { export function NcBadge() {
return ( return (
<ItemBadgeTooltip label="Neocash"> <ItemBadgeTooltip label="Neocash">
<Badge colorScheme="purple">NC</Badge> <Badge colorScheme="purple" display="block">
NC
</Badge>
</ItemBadgeTooltip> </ItemBadgeTooltip>
); );
} }
export function NpBadge() { export function NpBadge() {
// NOTE: display:block helps with some layout consistency, overriding the
// default of inline-block.
return ( return (
<ItemBadgeTooltip label="Neopoints"> <ItemBadgeTooltip label="Neopoints">
<Badge>NP</Badge> <Badge display="block">NP</Badge>
</ItemBadgeTooltip> </ItemBadgeTooltip>
); );
} }