import React from "react"; import { Box, Center, DarkMode } from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; import * as Sentry from "@sentry/react"; import OutfitThumbnail from "../components/OutfitThumbnail"; import { useOutfitPreview } from "../components/OutfitPreview"; import { loadable, MajorErrorMessage, TestErrorSender } from "../util"; const OutfitControls = loadable(() => import("./OutfitControls")); function WardrobePreviewAndControls({ isLoading, outfitState, dispatchToOutfit, }) { // Whether the current outfit preview has animations. Determines whether we // show the play/pause button. const [hasAnimations, setHasAnimations] = React.useState(false); const { appearance, preview } = useOutfitPreview({ isLoading: isLoading, speciesId: outfitState.speciesId, colorId: outfitState.colorId, pose: outfitState.pose, appearanceId: outfitState.appearanceId, wornItemIds: outfitState.wornItemIds, onChangeHasAnimations: setHasAnimations, placeholder: , "data-test-id": "wardrobe-outfit-preview", }); return (
{preview}
); } /** * OutfitThumbnailIfCached will render an OutfitThumbnail as a placeholder for * the outfit preview... but only if we already have the data to generate the * thumbnail stored in our local Apollo GraphQL cache. * * This means that, when you come from the Your Outfits page, we can show the * outfit thumbnail instantly while everything else loads. But on direct * navigation, this does nothing, and we just wait for the preview to load in * like usual! */ function OutfitThumbnailIfCached({ outfitId }) { const { data } = useQuery( gql` query OutfitThumbnailIfCached($outfitId: ID!) { outfit(id: $outfitId) { id updatedAt } } `, { variables: { outfitId, }, skip: outfitId == null, fetchPolicy: "cache-only", onError: (e) => console.error(e), } ); if (!data?.outfit) { return null; } return ( ); } export default WardrobePreviewAndControls;