diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 9148136..2ee1af0 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -730,9 +730,13 @@ function ItemPageOutfitPreview({ itemId }) {
justifyContent="center"
paddingRight="2"
>
- {!appearance.loading && isCompatible && (
-
- )}
+
-
+
{
// Wait for us to start _requesting_ the appearance, and _then_
// for it to load, and _then_ check compatibility.
@@ -886,7 +890,7 @@ function ExpandOnGroupHover({ children, ...props }) {
);
}
-function HTML5Badge({ usesHTML5 }) {
+function HTML5Badge({ usesHTML5, isLoading }) {
const greenBackground = useColorModeValue("green.100", "green.900");
const greenBorderColor = useColorModeValue("green.600", "green.500");
const greenTextColor = useColorModeValue("green.700", "white");
@@ -895,7 +899,19 @@ function HTML5Badge({ usesHTML5 }) {
const yellowBorderColor = useColorModeValue("yellow.600", "yellow.500");
const yellowTextColor = useColorModeValue("yellow.700", "white");
- if (usesHTML5) {
+ // `delayedUsesHTML5` stores the last known value of `usesHTML5`, when
+ // `isLoading` was `false`. This enables us to keep showing the badge, even
+ // when loading a new appearance - because it's unlikely the badge will
+ // change between different appearances for the same item, and the flicker is
+ // annoying!
+ const [delayedUsesHTML5, setDelayedUsesHTML5] = React.useState(null);
+ React.useEffect(() => {
+ if (!isLoading) {
+ setDelayedUsesHTML5(usesHTML5);
+ }
+ }, [usesHTML5, isLoading]);
+
+ if (delayedUsesHTML5 === true) {
return (
);
- } else {
+ } else if (delayedUsesHTML5 === false) {
return (
);
+ } else {
+ // If no `usesHTML5` value has been provided yet, we're empty for now!
+ return null;
}
}