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

Add brief delay before Latest Items loading state

Browse source 
This UI generally loads very fast, thanks to the CDN cache, so the flash of skeleton content is more distracting than anything else! We still show it quickly after 300ms, but good network connections should reliably get it loaded before then.
This commit is contained in:
Emi Matchu 2021-01-18 06:46:18 -08:00
parent f3633f5ab6
commit b78cede939
1 changed files with 25 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/app/HomePage.js
View file

@ -17,6 +17,7 @@ import { useHistory, useLocation } from "react-router-dom";
import { useLazyQuery, useQuery } from "@apollo/client"; import { useLazyQuery, useQuery } from "@apollo/client";
import { import {
Delay,
ErrorMessage, ErrorMessage,
Heading1, Heading1,
Heading2, Heading2,
@ -299,28 +300,30 @@ function NewItemsSectionContent() {
if (loading) { if (loading) {
return ( return (
<ItemCardHStack> <Delay>
<SquareItemCardSkeleton /> <ItemCardHStack>
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton minHeightNumLines={3} /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton minHeightNumLines={3} />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
<SquareItemCardSkeleton /> <SquareItemCardSkeleton />
</ItemCardHStack> <SquareItemCardSkeleton />
</ItemCardHStack>
</Delay>
); );
} }