OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

tweaks to item page description loading delay

Browse source 
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:
Emi Matchu 2020-09-15 04:54:37 -07:00
parent 02cb4731d3
commit 496e2e9550
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/ItemPage.js
View file

@ -31,7 +31,7 @@ import {
NcBadge, NcBadge,
NpBadge, NpBadge,
} from "./components/ItemCard"; } from "./components/ItemCard";
import { Heading1, usePageTitle } from "./util"; import { Delay, Heading1, usePageTitle } from "./util";
import OutfitPreview from "./components/OutfitPreview"; import OutfitPreview from "./components/OutfitPreview";
function ItemPage() { function ItemPage() {
@ -73,7 +73,11 @@ function ItemPageHeader({ itemId, isEmbedded }) {
usePageTitle(data?.item?.name, { skip: 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) { if (error) {
return <Box color="red.400">{error.message}</Box>; return <Box color="red.400">{error.message}</Box>;
@ -116,7 +120,9 @@ function ItemPageHeader({ itemId, isEmbedded }) {
alignItems="stretch" alignItems="stretch"
justifyContent="center" justifyContent="center"
> >
<SkeletonText noOfLines={numDescriptionLines} spacing="4" /> <Delay ms={2000}>
<SkeletonText noOfLines={numDescriptionLines} spacing="4" />
</Delay>
</Box> </Box>
)} )}
</Box> </Box>