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

better partial item data loading

Browse source 
Here, we add loading skeletons to lots of individual elements, instead of doing a whole item placeholder skeleton. That helps when coming from pages where we have some data, like name and thumbnail, but things is isNc are still missing.
This commit is contained in:
Emi Matchu 2020-09-12 18:32:06 -07:00
parent 383d514397
commit 056b238462
1 changed files with 73 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/app/ItemPage.js
View file

@ -12,7 +12,6 @@ import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import HangerSpinner from "./components/HangerSpinner";
import {
ItemBadgeList,
ItemThumbnail,
@ -34,7 +33,7 @@ function ItemPage() {
}
function ItemPageHeader({ itemId }) {
const { loading, error, data } = useQuery(
const { error, data } = useQuery(
gql`
query ItemPage($itemId: ID!) {
item(id: $itemId) {
@ -45,59 +44,16 @@ function ItemPageHeader({ itemId }) {
}
}
`,
{ variables: { itemId } }
{ variables: { itemId }, returnPartialData: true }
);
usePageTitle(data?.item?.name);
if (loading) {
return (
<Box
display="flex"
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="/">Old DTI</LinkBadge>
</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>
);
}
if (error) {
return <Box color="red.400">{error.message}</Box>;
}
const { item } = data;
const item = data?.item;
return (
<Box
@ -106,15 +62,13 @@ function ItemPageHeader({ itemId }) {
justifyContent="flex-start"
width="100%"
>
<ItemThumbnail
item={item}
size="lg"
isActive
marginRight="4"
flex="0 0 auto"
/>
<Skeleton isLoaded={item?.thumbnailUrl} marginRight="4">
<ItemThumbnail item={item} size="lg" isActive flex="0 0 auto" />
</Skeleton>
<Box>
<Heading1 lineHeight="1.1">{item.name}</Heading1>
<Skeleton isLoaded={item?.name}>
<Heading1 lineHeight="1.1">{item?.name || "Item name here"}</Heading1>
</Skeleton>
<ItemPageBadges item={item} />
</Box>
</Box>
@ -122,12 +76,19 @@ function ItemPageHeader({ itemId }) {
}
function ItemPageBadges({ item }) {
const searchBadgesAreLoaded = item?.name != null && item?.isNc != null;
return (
<ItemBadgeList>
{item.isNc ? <NcBadge /> : <NpBadge />}
<Skeleton isLoaded={item?.isNc != null}>
{item?.isNc ? <NcBadge /> : <NpBadge />}
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
<LinkBadge href={`https://impress.openneo.net/items/${item.id}`}>
Old DTI
</LinkBadge>
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
<LinkBadge
href={
"https://items.jellyneo.net/search/?name=" +
@ -137,7 +98,9 @@ function ItemPageBadges({ item }) {
>
Jellyneo
</LinkBadge>
{!item.isNc && (
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
{!item?.isNc && (
<LinkBadge
href={
"http://www.neopets.com/market.phtml?type=wizard&string=" +
@ -147,7 +110,9 @@ function ItemPageBadges({ item }) {
Shop Wiz
</LinkBadge>
)}
{!item.isNc && (
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
{!item?.isNc && (
<LinkBadge
href={
"http://www.neopets.com/portal/supershopwiz.phtml?string=" +
@ -157,7 +122,9 @@ function ItemPageBadges({ item }) {
Super Wiz
</LinkBadge>
)}
{!item.isNc && (
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
{!item?.isNc && (
<LinkBadge
href={
"http://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=item_exact&search_string=" +
@ -167,7 +134,9 @@ function ItemPageBadges({ item }) {
Trades
</LinkBadge>
)}
{!item.isNc && (
</Skeleton>
<Skeleton isLoaded={searchBadgesAreLoaded}>
{!item?.isNc && (
<LinkBadge
href={
"http://www.neopets.com/genie.phtml?type=process_genie&criteria=exact&auctiongenie=" +
@ -177,6 +146,7 @@ function ItemPageBadges({ item }) {
Auctions
</LinkBadge>
)}
</Skeleton>
</ItemBadgeList>
);
}