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

Add gist page fallback

Browse Source
This commit is contained in:
DefectingCat
2023-01-30 11:54:36 +08:00
parent 35d1aeec9e
commit 9e129669f7
3 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/gists/gists-code-skeleton.tsx Normal file
View File

@ -0,0 +1,75 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './gists-code.module.css';
const bodyClass = clsx(
'rounded-lg',
'h-4 bg-gray-300',
'mb-2 last:mb-0 animate-pulse'
);
const allLength = [
500, 400, 300, 200, 332, 402, 105, 399, 501, 285, 378, 123, 325, 456,
];
const GistsCode = () => {
return (
<>
<div className={styles.wrapper}>
<div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
<div className="flex items-center h-full mx-3">
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
)}
></div>
</div>
<div
className={clsx(
'px-4 bg-white',
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
'overflow-hidden whitespace-nowrap overflow-ellipsis',
'flex items-center'
)}
>
<span
className={clsx(
'bg-gray-300 animate-pulse',
'w-20 h-4 block rounded'
)}
></span>
</div>
</div>
<pre>
{allLength.map((item, index) => (
<div
key={index}
className={bodyClass}
style={{ width: item }}
></div>
))}
</pre>
</div>
</>
);
};
export default memo(GistsCode);

11
components/gists/gists-skeleton.tsx
View File

@ -12,9 +12,12 @@ import { Fragment, ReactElement, Suspense } from 'react';
import { useRouter } from 'next/router';
import clsx from 'clsx';
const GistsCode = dynamic(() => import('components/gists/gists-code'), {
suspense: true,
});
const GistsCode = dynamic(
() => import('components/gists/gists-code-skeleton'),
{
suspense: true,
}
);
dayjs.extend(relativeTime);
@ -54,7 +57,7 @@ const GistSkeleton = () => {
</p>
<Suspense fallback>
{/*<GistsCode file={gist.files[f]} showFileName />*/}
<GistsCode />
</Suspense>
</div>
</div>