mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
add post page loading
This commit is contained in:
62
app/p/[slug]/loading.tsx
Normal file
62
app/p/[slug]/loading.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import clsx from 'clsx';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const PostToc = dynamic(() => import('components/post/post-toc'));
|
||||
const lines = Array(4).fill(null);
|
||||
|
||||
const Page = async () => {
|
||||
return (
|
||||
<>
|
||||
<main
|
||||
id="article"
|
||||
className={clsx(
|
||||
'relative max-w-4xl px-4 mx-auto my-10',
|
||||
'lg:w-[56rem] w-full flex-1',
|
||||
'mt-8',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<h1
|
||||
className={clsx(
|
||||
'w-[500px] h-12 bg-gray-300',
|
||||
'dark:bg-gray-500 rounded-lg animate-pulse',
|
||||
)}
|
||||
></h1>
|
||||
<time
|
||||
className={clsx(
|
||||
'mt-8 mb-10 w-40',
|
||||
'rounded-lg bg-gray-300',
|
||||
'dark:bg-gray-500 animate-pulse',
|
||||
'h-3',
|
||||
)}
|
||||
></time>
|
||||
</div>
|
||||
|
||||
<PostToc toc={[]} tocLength={0} />
|
||||
|
||||
{lines.map((_, i) => (
|
||||
<div
|
||||
className={clsx(
|
||||
'h-4 w-full bg-gray-200',
|
||||
'animate-pulse rounded-lg',
|
||||
'dark:bg-rua-gray-700',
|
||||
'mb-2',
|
||||
)}
|
||||
key={i}
|
||||
></div>
|
||||
))}
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
'h-4 w-64 bg-gray-200',
|
||||
'animate-pulse rounded-lg',
|
||||
'dark:bg-rua-gray-700',
|
||||
'mb-2',
|
||||
)}
|
||||
></div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
@ -1,5 +1,5 @@
|
||||
import React, { memo } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
|
||||
const PostCardLoading = () => {
|
||||
return (
|
||||
|
@ -1,5 +1,4 @@
|
||||
import clsx from 'clsx';
|
||||
// import GistsCode from './gists-code';
|
||||
|
||||
const GistSkeleton = () => {
|
||||
return (
|
||||
@ -38,8 +37,6 @@ const GistSkeleton = () => {
|
||||
<p className="pb-2 text-lg text-gray-500">
|
||||
<span className={'w-16 animate-pulse'}></span>
|
||||
</p>
|
||||
|
||||
{/* <GistsCode /> */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
Reference in New Issue
Block a user