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

add post list page loading

Browse Source
This commit is contained in:
DefectingCat
2023-05-17 14:56:11 +08:00
parent 2729631866
commit 884fb274de
4 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/blog/loading.tsx Normal file
View File

@ -0,0 +1,15 @@
import PostCardLoading from './post-card-loading';
const Loading = () => {
const num = Array(4).fill(1);
return (
<>
{num.map((_, i) => (
<PostCardLoading key={i} />
))}
</>
);
};
export default Loading;

3
app/blog/page.tsx
View File

@ -3,6 +3,7 @@ import PostCardLoading from './post-card-loading';
import { PostPerPage, postLists } from 'lib/posts';
import { Fragment, Suspense } from 'react';
import Pagination from 'components/rua/rua-pagination';
import clsx from 'clsx';
export default async function Page() {
const allPosts = await postLists();
@ -31,4 +32,4 @@ export default async function Page() {
/>
</>
);
}
}

59
app/blog/post-card-loading.tsx
View File

@ -5,25 +5,58 @@ const PostCardLoading = () => {
return (
<article
className={clsx(
'rounded-xl py-4 px-5 md:p-7 animate-pulse',
'bg-sky-100 bg-opacity-50',
'dark:bg-rua-gray-800 dark:bg-opacity-100',
'flex items-center justify-between text-gray-800 ',
'mb-4 dark:text-gray-200'
'rounded-xl py-4 px-5 md:p-7 ',
'hover:bg-sky-100 hover:bg-opacity-50',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col'
)}
>
<div className="flex-1">
<h2 className="w-full mb-4 bg-gray-300 rounded-lg md:w-96 h-9 dark:bg-gray-500"></h2>
<div className="flex justify-between">
<h2
className={clsx(
'w-96 bg-gray-300 h-7 animate-pulse',
'mb-4 text-3xl font-semibold font-Barlow',
'rounded-lg dark:bg-gray-500'
)}
></h2>
<div className="flex items-center text-sm">
<div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
<div className="w-16 h-5 bg-gray-300 rounded-md dark:bg-gray-500"></div>
</div>
<div
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg'
)}
></div>
</div>
<div className="hidden w-24 h-6 bg-gray-300 rounded-md md:block dark:bg-gray-500"></div>
<div className="flex justify-between">
<div className="flex items-center text-sm">
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500'
)}
></div>
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500'
)}
></div>
</div>
<div
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg lg:hidden'
)}
></div>
</div>
</article>
);
};
export default memo(PostCardLoading);
export default memo(PostCardLoading);

4
app/blog/post-card.tsx
View File

@ -23,7 +23,7 @@ const PostCard = ({ post }: Props) => {
)}
>
<div className="flex justify-between">
<h2 className="mb-4 text-3xl font-semibold font-Barlow">
<h2 className="mb-4 text-3xl font-semibold font-Barlow">
{post.title}
</h2>
@ -51,4 +51,4 @@ const PostCard = ({ post }: Props) => {
);
};
export default memo(PostCard);
export default memo(PostCard);