rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve contrast on skeletons (#201)

Browse Source 
* Darken skeletons for screenshots

* Fix shimmer bug

* Add delay

* Use 3 secs
This commit is contained in:
Delba de Oliveira
2023-10-06 15:42:31 +01:00
committed by GitHub
parent 3f2a2ae845
commit cf85adfbc5
2 changed files with 44 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/15-final/app/lib/data.ts
View File

@@ -13,12 +13,12 @@ export async function fetchRevenue() {
try {
// We artificially delay a reponse for demo purposes.
// Don't do this in real life :)
// console.log('Fetching revenue data...');
// await new Promise((resolve) => setTimeout(resolve, 3000));
console.log('Fetching revenue data...');
await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`;
// console.log('Data fetch complete after 3 seconds.');
console.log('Data fetch complete after 3 seconds.');
return data.rows;
} catch (error) {

110
dashboard/15-final/app/ui/dashboard/skeletons.tsx
View File

@@ -4,13 +4,15 @@ const shimmer =
export function CardSkeleton() {
return (
<div className={`${shimmer} relative rounded-xl bg-gray-50 p-2 shadow-sm`}>
<div
className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
>
<div className="flex p-4">
<div className="h-5 w-5 rounded-md bg-gray-100"></div>
<h3 className="ml-2 h-6 w-16 rounded-md bg-gray-100 text-sm font-medium"></h3>
<div className="h-5 w-5 rounded-md bg-gray-200" />
<div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
</div>
<div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
<div className="h-7 w-20 rounded-md bg-gray-100"></div>
<div className="h-7 w-20 rounded-md bg-gray-200" />
</div>
</div>
);
@@ -18,81 +20,51 @@ export function CardSkeleton() {
export function RevenueChartSkeleton() {
return (
<div className={`${shimmer} relative w-full md:col-span-4`}>
<h2 className="mb-4 h-8 w-36 rounded-md bg-gray-100"></h2>
<div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4"></div>
<div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
<div className="rounded-xl bg-gray-100 p-4">
<div className="sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4" />
<div className="flex items-center pb-2 pt-6">
<div className="h-5 w-5 rounded-full bg-gray-100"></div>
<div className="ml-2 h-4 w-20 rounded-md bg-gray-100"></div>
<div className="h-5 w-5 rounded-full bg-gray-200" />
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
</div>
</div>
</div>
);
}
export function InvoiceSkeleton() {
return (
<div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-200" />
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-200" />
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
</div>
);
}
export function LatestInvoicesSkeleton() {
return (
<div
className={`${shimmer} relative flex w-full flex-col md:col-span-4 lg:col-span-4`}
className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4 lg:col-span-4`}
>
<h2 className="mb-4 h-8 w-36 rounded-md bg-gray-100"></h2>
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
<div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
<div className="bg-white px-6">
<div className="flex flex-row items-center justify-between border-b py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-100"></div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<div className="flex items-center pb-2 pt-6">
<div className="h-5 w-5 rounded-full bg-gray-200" />
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
</div>
<div className="flex flex-row items-center justify-between border-b py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-100"></div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
<div className="flex flex-row items-center justify-between border-b py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-100"></div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
<div className="flex flex-row items-center justify-between border-b py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-100"></div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
<div className="flex flex-row items-center justify-between py-4">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="min-w-0">
<div className="h-5 w-40 rounded-md bg-gray-100"></div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="mt-2 h-4 w-12 rounded-md bg-gray-100"></div>
</div>
</div>
<div className="flex items-center pb-2 pt-6">
<div className="h-5 w-5 rounded-full bg-gray-100"></div>
<div className="ml-2 h-4 w-20 rounded-md bg-gray-100"></div>
</div>
</div>
</div>
@@ -102,9 +74,9 @@ export function LatestInvoicesSkeleton() {
export default function DashboardSkeleton() {
return (
<>
<h2
className={`${shimmer} relative mb-4 h-8 w-36 rounded-md bg-gray-100`}
></h2>
<div
className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
/>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<CardSkeleton />
<CardSkeleton />