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