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

add more items to skeleton for search

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-24 21:23:03 -07:00
parent eac6b308cd
commit 846b26f4c5
3 changed files with 8 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/ItemList.js
View file

@ -17,18 +17,14 @@ function ItemList({ items, wornItemIds, dispatchToOutfit }) {
); );
} }
function ItemListSkeleton() { function ItemListSkeleton({ count }) {
return ( return (
<Stack spacing="3"> <Stack spacing="3">
<Box> {Array.from({ length: count }).map((_, i) => (
<ItemSkeleton /> <Box key={i}>
</Box> <ItemSkeleton />
<Box> </Box>
<ItemSkeleton /> ))}
</Box>
<Box>
<ItemSkeleton />
</Box>
</Stack> </Stack>
); );
} }

2
src/SearchPanel.js
View file

@ -60,7 +60,7 @@ function SearchResults({ query, outfitState, dispatchToOutfit }) {
if (loading || variables.query !== query) { if (loading || variables.query !== query) {
return ( return (
<Delay ms={500}> <Delay ms={500}>
<ItemListSkeleton /> <ItemListSkeleton count={8} />
</Delay> </Delay>
); );
} }

2
src/WardrobePage.js
View file

@ -141,7 +141,7 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
<Box key={i}> <Box key={i}>
<Delay> <Delay>
<Skeleton height="2.3rem" width="12rem" mb="3" /> <Skeleton height="2.3rem" width="12rem" mb="3" />
<ItemListSkeleton /> <ItemListSkeleton count={3} />
</Delay> </Delay>
</Box> </Box>
))} ))}