diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js index e61584c..059d22f 100644 --- a/src/OutfitPreview.js +++ b/src/OutfitPreview.js @@ -43,7 +43,10 @@ function OutfitPreview({ itemIds, speciesId, colorId }) { } } `, - { variables: { itemIds, speciesId, colorId } } + { + variables: { itemIds, speciesId, colorId }, + returnPartialData: true, + } ); if (error) { @@ -62,7 +65,12 @@ function OutfitPreview({ itemIds, speciesId, colorId }) { {getVisibleLayers(data).map((layer) => ( - + ))} {loading && ( @@ -91,9 +99,16 @@ function getVisibleLayers(data) { const allAppearances = [ data.petAppearance, - ...data.items.map((i) => i.appearanceOn), - ]; - const allLayers = allAppearances.map((a) => a.layers).flat(); + ...(data.items || []).map((i) => i.appearanceOn), + ].filter((a) => a); + let allLayers = allAppearances.map((a) => a.layers).flat(); + + // Clean up our data a bit, by ensuring only one layer per zone. This + // shouldn't happen in theory, but sometimes our database doesn't clean up + // after itself correctly :( + allLayers = allLayers.filter((l, i) => { + return allLayers.findIndex((l2) => l2.zone.id === l.zone.id) === i; + }); const allRestrictedZoneIds = allAppearances .map((l) => l.restrictedZones) diff --git a/src/util.js b/src/util.js index 7dc8325..b12f694 100644 --- a/src/util.js +++ b/src/util.js @@ -1,7 +1,7 @@ import React from "react"; import { Box } from "@chakra-ui/core"; -export function Delay({ children, ms = 500 }) { +export function Delay({ children, ms = 300 }) { const [isVisible, setIsVisible] = React.useState(false); React.useEffect(() => {