优化 loading
This commit is contained in:
parent
0b11f5d7bf
commit
5d347190f8
@ -1,13 +1,30 @@
|
|||||||
import dynamic from 'next/dynamic'
|
import dynamic from 'next/dynamic'
|
||||||
import { Suspense } from 'react'
|
import { Suspense } from 'react'
|
||||||
|
import { Logo } from '@/components/icons/Logo'
|
||||||
|
import { Loader2 } from 'lucide-react'
|
||||||
|
|
||||||
|
const LoadingLogo = () => (
|
||||||
|
<div className="h-full bg-background flex items-center justify-center">
|
||||||
|
<div className="flex flex-col items-center mt-20">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<Logo className="w-20 h-20" />
|
||||||
|
<p className="text-lg font-medium text-foreground">让 Markdown 编辑更简单</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<span>正在加载编辑器</span>
|
||||||
|
<Loader2 className="w-5 h-5 animate-spin" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
// Dynamically import WechatEditor with no SSR
|
// Dynamically import WechatEditor with no SSR
|
||||||
const WechatEditor = dynamic(() => import('@/components/editor/WechatEditor'), {
|
const WechatEditor = dynamic(() => import('@/components/editor/WechatEditor'), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
loading: () => (
|
loading: () => (
|
||||||
<div className="h-full bg-background flex items-center justify-center">
|
<LoadingLogo />
|
||||||
<div className="animate-pulse">Loading editor...</div>
|
|
||||||
</div>
|
|
||||||
),
|
),
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -16,9 +33,7 @@ export default function WechatPage() {
|
|||||||
<main className="h-full bg-background flex flex-col">
|
<main className="h-full bg-background flex flex-col">
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<Suspense fallback={
|
<Suspense fallback={
|
||||||
<div className="h-full flex items-center justify-center">
|
<LoadingLogo />
|
||||||
<div className="animate-pulse">Loading editor...</div>
|
|
||||||
</div>
|
|
||||||
}>
|
}>
|
||||||
<WechatEditor />
|
<WechatEditor />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
Loading…
Reference in New Issue
Block a user