优化 loading
This commit is contained in:
parent
0b11f5d7bf
commit
5d347190f8
@ -1,13 +1,30 @@
|
||||
import dynamic from 'next/dynamic'
|
||||
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
|
||||
const WechatEditor = dynamic(() => import('@/components/editor/WechatEditor'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-full bg-background flex items-center justify-center">
|
||||
<div className="animate-pulse">Loading editor...</div>
|
||||
</div>
|
||||
<LoadingLogo />
|
||||
),
|
||||
})
|
||||
|
||||
@ -16,9 +33,7 @@ export default function WechatPage() {
|
||||
<main className="h-full bg-background flex flex-col">
|
||||
<div className="flex-1 relative">
|
||||
<Suspense fallback={
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="animate-pulse">Loading editor...</div>
|
||||
</div>
|
||||
<LoadingLogo />
|
||||
}>
|
||||
<WechatEditor />
|
||||
</Suspense>
|
||||
|
Loading…
Reference in New Issue
Block a user