tweaks to item page description loading delay
make it 2 lines when embedded, and also add a Delay, bc prod is much faster to load this and it's annoying to see the flash!
This commit is contained in:
parent
02cb4731d3
commit
496e2e9550
1 changed files with 9 additions and 3 deletions
|
@ -31,7 +31,7 @@ import {
|
|||
NcBadge,
|
||||
NpBadge,
|
||||
} from "./components/ItemCard";
|
||||
import { Heading1, usePageTitle } from "./util";
|
||||
import { Delay, Heading1, usePageTitle } from "./util";
|
||||
import OutfitPreview from "./components/OutfitPreview";
|
||||
|
||||
function ItemPage() {
|
||||
|
@ -73,7 +73,11 @@ function ItemPageHeader({ itemId, isEmbedded }) {
|
|||
|
||||
usePageTitle(data?.item?.name, { skip: isEmbedded });
|
||||
|
||||
const numDescriptionLines = useBreakpointValue({ base: 2, md: 1 });
|
||||
// Show 2 lines of description text placeholder on small screens, or when
|
||||
// embedded in the wardrobe page's narrow drawer. In larger contexts, show
|
||||
// just 1 line.
|
||||
const viewportNumDescriptionLines = useBreakpointValue({ base: 2, md: 1 });
|
||||
const numDescriptionLines = isEmbedded ? 2 : viewportNumDescriptionLines;
|
||||
|
||||
if (error) {
|
||||
return <Box color="red.400">{error.message}</Box>;
|
||||
|
@ -116,7 +120,9 @@ function ItemPageHeader({ itemId, isEmbedded }) {
|
|||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Delay ms={2000}>
|
||||
<SkeletonText noOfLines={numDescriptionLines} spacing="4" />
|
||||
</Delay>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
|
Loading…
Reference in a new issue