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
-
-
+
+
Jellyneo
-
-
+
+
{!item?.isNc && (
)}
-
-
+
+
{!item?.isNc && (
)}
-
-
+
+
{!item?.isNc && (
)}
-
-
+
+
{!item?.isNc && (
)}
-
+
);
}
@@ -328,7 +328,7 @@ function ItemPageOwnWantButtons({ itemId }) {
return (
-
+
-
+
-
+
-
+
);
}
@@ -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;