优化 loading

This commit is contained in:
tianyaxiang 2025-02-02 19:09:08 +08:00
parent 0b11f5d7bf
commit 5d347190f8

View File

@ -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>