diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index 3818cdb..bb8246a 100644 --- a/src/app/ItemPage.js +++ b/src/app/ItemPage.js @@ -93,11 +93,11 @@ function ItemPageHeader({ itemId, isEmbedded }) { justifyContent="flex-start" width="100%" > - + - + - + {item?.name || "Item name here"} - + @@ -135,13 +135,13 @@ function ItemPageBadges({ item, isEmbedded }) { return ( - + {item?.isNc ? : } - + { // If the createdAt date is null (loaded and empty), hide the badge. item.createdAt !== null && ( - {item.createdAt && } - + ) } - + Old DTI - - + + - + - + - + - + ); } @@ -459,4 +459,32 @@ function ItemPageOutfitPreview({ itemId }) { ); } +/** + * SubtleSkeleton hides the skeleton animation until a second has passed, and + * doesn't fade in the content if it loads before then. This helps avoid + * flash-of-content stuff! + * + * For plain Skeletons, we often use instead. But + * that pattern doesn't work as well for wrapper skeletons where we're using + * placeholder content for layout: we don't want the delay if the content + * really _is_ present! + */ +function SubtleSkeleton({ ...props }) { + const [shouldShowSkeleton, setShouldShowSkeleton] = React.useState(false); + + React.useEffect(() => { + const t = setTimeout(() => setShouldShowSkeleton(true), 1000); + return () => clearTimeout(t); + }); + + return ( + + ); +} + export default ItemPage;