xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add user info lazyloading

Browse Source
This commit is contained in:
DefectingCat
2023-03-22 15:54:37 +08:00
parent d1adac91d7
commit f748d7269d
2 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/gists/page.tsx
View File

@ -4,6 +4,7 @@ import UserInfo from './user-info';
import { Suspense } from 'react';
import Pagination from 'components/rua/rua-pagination';
import FileContent from './file-content';
import UserInfoLoading from './user-info-skeleton';
export default async function Page() {
const gists = await getGists();
@ -17,7 +18,7 @@ export default async function Page() {
<>
<main className="max-w-5xl px-4 mx-auto lg:px-0">
<div className="md:flex">
<Suspense fallback>
<Suspense fallback={<UserInfoLoading />}>
{/* @ts-expect-error Async Server Component */}
<UserInfo />
</Suspense>

69
app/gists/user-info-skeleton.tsx Normal file
View File

@ -0,0 +1,69 @@
import clsx from 'clsx';
import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
const UserInfoLoading = () => {
return (
<>
<div
className={clsx(
'flex md:items-center flex-1',
'max-w-[280px] md:block',
'mb-4 flex-col md:flex-row'
)}
>
<div className="flex md:flex-col">
<div
className={clsx(
'w-16 h-16 mr-4 overflow-hidden',
'md:w-72 md:h-72 bg-gray-200 rounded-full',
'animate-pulse dark:bg-rua-gray-800'
)}
></div>
<div>
<h1
className={clsx(
'text-xl font-bold font-Barlow md:text-2xl w-44',
'animate-pulse h-6 rounded-lg',
'bg-gray-200 dark:bg-rua-gray-800',
'my-2'
)}
></h1>
<h2
className={clsx(
'text-xl text-gray-400 font-Barlow md:text-2xl',
'animate-pulse h-5 rounded-lg w-32',
'bg-gray-200 dark:bg-rua-gray-800'
)}
></h2>
</div>
</div>
<div
className={clsx(
'my-4 w-44 h-4 rounded-lg animate-pulse',
'bg-gray-200 dark:bg-rua-gray-800'
)}
></div>
<div>
<div className="flex items-center mb-1 animate-pulse">
<FiMail className="mr-2" />
<div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
</div>
<div className="flex items-center mb-1 animate-pulse">
<FiLink className="mr-2" />
<div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
</div>
<div className="flex items-center mb-1 animate-pulse">
<FiTwitter className="mr-2" />
<div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
</div>
</div>
</div>
</>
);
};
export default UserInfoLoading;